MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Action menu

An action menu presents a list of actions, related to the app's content, from which the user may make a selection. The Action Menu contains one or more items. The menu can expand in height to accommodate additional items. If the screen height is exceeded, the 
action menu becomes vertically scrollable. 


Interaction

When in the gallery app for example, the action menu is triggered by tapping the share button.

On tap, an animation loads the action menu. The animation lasts less than a second and consists of a series of circles emanating from the button that triggered the action menu.

Upon completion of the animation, the action menu is displayed in the center of the screen. The user can now select an item from the action menu. Users can dismiss the action menu by tapping outside of the action menu area.

Scrollable action menus must leave space below or above the action menu to allow users to dismiss the menu.

Upon selection, the action menu closes and the corresponding action is displayed. In this case, the files are attached to an email.

Item ordering

Place the most commonly used or important items at the top of the Action Menu. Negative actions such as delete should be placed at or near the bottom of the Action Menu.


If items in the list cannot be prioritized by importance or frequency of use, alphabetical ordering should be used. Examples include a list of contacts or countries.

When using an Action Menu to select from a list of applications, the list is sorted alphabetically and application icons should be displayed to the left of the label, as indicated in the above screenshots.

Implementation guides

Document Tags and Contributors

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