Coding guide: Action menus

Here you can find examples of how to create action menus on Firefox OS, as well as downloads for the CSS and image resources used by the built-in apps on Firefox OS. You can copy these resources into your app and make use of them to build apps that match these apps' appearances.

Implementing action menus

To implement an action menu using the style shown here, place the CSS and media files into your app and then import the CSS using the @import at-rule:

@import url(resources/action_menu.css);

Make sure the media files are in the location expected by the CSS (either by placing them in a corresponding location or by revising the CSS).

Examples

With title

HTML to create the menu

The HTML below creates the dialog with four buttons, one of which is disabled.

<form role="dialog" data-type="action" onsubmit="return false;" id="sample-menu">
  <header id="sample-title"> Title </header> <!-- this header is optional -->
  <menu>
    <button id="button1"> Action 1 </button>
    <button id="button2" disabled> Action 2 (disabled) </button>
    <button id="button3"> Action 3 </button>
    <button id="cancel"> Cancel </button>
  </menu>
</form>

JavaScript content

The JavaScript below simply adds code to some of the buttons to change the title of the dialog when clicked.

var btn = document.querySelector("#button1");
btn.addEventListener("click", function() {
  var title = document.getElementById("sample-title");
  title.innerHTML="Button 1";
});
var btn = document.querySelector("#button3");
btn.addEventListener("click", function() {
  var title = document.getElementById("sample-title");
  title.innerHTML="Button 3";
});

Working demo

You can try out the action menu in this live demonstration.

@import url(https://developer.mozilla.org/media/gaia/shared/style/action_menu.css);
@import url('https://developer.mozilla.org/media/css/gaia.css');
html, body {
  margin: 0;
  padding: 0;
  font-size: 10px;
  height: 100%;
  overflow-x: hidden;
  background: #000 url(https://mdn.mozillademos.org/files/4655/fx_logo_white_backdrop.jpg) fixed;
}
body { background: none; }

Without title

HTML to create the menu

The HTML below creates the dialog with four buttons, one of which is disabled.

<form role="dialog" data-type="action" onsubmit="return false;" id="sample-menu">
  <menu>
    <button id="button1"> Action 1 </button>
    <button id="button2" disabled> Action 2 (disabled) </button>
    <button id="button3"> Action 3 </button>
    <button id="cancel"> Cancel </button>
  </menu>
</form>

Working demo

You can try out the action menu in this live demonstration.

@import url(https://developer.mozilla.org/media/gaia/shared/style/action_menu.css);
@import url('https://developer.mozilla.org/media/css/gaia.css');
html, body {
  margin: 0;
  padding: 0;
  font-size: 10px;
  height: 100%;
  overflow-x: hidden;
  background: #000 url(https://mdn.mozillademos.org/files/4655/fx_logo_white_backdrop.jpg) fixed;
}
body { background: none; }