Menus appear upon interaction with a button, action, or other control. They display a list of choices, with one choice per line.
Menu items may be disabled if not applicable to a certain context. Contextual menus dynamically change their available menu items based on the current state of the app.
Simple menus (mobile and tablet)
Cascading menus (desktop)
Tree menus
List menus
Menus dropdowns appear above other in-app elements.
Scrollable
Minimizable
A menu is a temporary piece of material that appears upon interaction with a button, action, pointer, or other control. It contains at least two menu items.
Each menu item consists of a discrete option or action that can affect the app, the view, or selected elements within a view.
The label of a button or control should concisely and accurately reflect the items within the menu. Menu bars typically use single words as labels, like “file,” “view,” and “edit.” Other contexts may require longer labels.
Menus display a consistent set of menu items. A menu item may be enabled or disabled based on the current state of the application.
Contextual menus dynamically change their available menu items based on the current state of the application.
Some app states may result in a contextual menu with only a single menu item. For example, when highlighting text on a web page, Android display only the Copy menu item, as users cannot cut or paste text.
Each menu item is limited to a single line of text (a single word or short phrase) that describes the action it will perform when selected.
Menu items may also contain:
Menus with static content should have the most frequently used menu items placed at the top of the menu.
Menus with dynamic content may have other behavior, such as placing previously used fonts at the top of the menu. The order can change based on user actions.
Menu items can reveal nested submenus. Ideally, limit nesting to one level deep, as it can be difficult to navigate multiple nested submenus.
Submenu open direction (dropdown position) can be also specified. Available options are: 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'overlay-left', 'overlay-right', and 'auto' (behaves like 'bottom-right', but also has browser bounds detection).
Displaying actions as disabled, rather than removing them, lets the user know they exist under the right conditions.
For example, Redo is disabled when there is nothing to redo. Cut and Copy are disabled until content is selected.
If the height of the main Menu or a submenu is specified and the content overflows, the content becomes scrollable.