We want to help developers like you. Tell us about how you work: http://qsurvey.mozilla.com/s3/Developer-Audience-Survey-V2/?s=mdn

Action menu

An action menu presents a list of actions, related to the app's content, from which the user may make a selection. See the Coding guide for details on how to implement an action menu in your app.

Characteristics

  • Opened from buttons within app content; these buttons are often inside toolbars (for example, the Browser app's "Share" button).
  • Action menus contain one or more items.
  • These menus expand in height to accomodate their items, to a maximum of the screen's height. Once that maximum height is reached, the content becomes scrollable vertically. Generally, the best practice is to try to include no more than five items plus a menu title.
  • The title string is optional.
  • The menu is closed by one of:
    • Selecting one of the actions.
    • Tapping the "Cancel" button.

Visuals

Idle state

The opened action menu waiting for the user to tap a selection.

Pressed state

The appearance of the menu while the user's finger is pressing the button "Option 03".

Variations

There are two basic variations on the action menu: whether or not the menu has a title string at the top.

Interaction

This diagram shows how the user interaction flow with the action menu works.

See also

Document Tags and Contributors

 Contributors to this page: chrisdavidmills, Luis_Calvo, Sheppy
 Last updated by: chrisdavidmills,