Menus

Menus display a list of choices on a transient sheet of material.

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.

Types

Simple menus (mobile and tablet)
Cascading menus (desktop)

Elevation

Menus appear above other in-app elements.

Behavior

Scrollable

Alternatives

Simple dialogs

Material Design menus show choices on a transient sheet

Usage

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.

Menus should not be used as a primary method for navigation within an app.

Material Design app bar action overflow menu — The action overflow in the app bar will emit a menu.

Material Design action overflow menu with 5 items — This action overflow menu contains five menu items: “Refresh”, “Settings”, “Send feedback”,“Help,” and “Signout”.

Menu labels

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,” “format,” and “edit.” Other contexts may require longer labels.

Disabled menu options

Menus display a consistent set of menu items. A menu item may be enabled or disabled based on the current state of the application.

Menu items unify under Material Design view — Do.
The title “View” accurately describes the unifying characteristic of the menu items it contains.

Non-descriptive title in Material Design menu items — Don’t.
The title “Stuff” is not descriptive and does not help users predict what menu items they will find in the Stuff menu.

Contextual menus

Contextual menus dynamically change their available menu items based on the current state of the application.

Menu items that are irrelevant to the current context may be removed
Menu items which are relevant but need certain conditions to be met may be disabled. For example, the Copy menu option becomes enabled when text is selected.

Single menu-item states

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.

Material Design contextual menus adapt based on app state

Menus are scrollable

If the height of a menu prevents all menu items from being displayed, the menu can scroll internally. One example is when viewing a menu on a phone in landscape orientation.

Scrollable menu example in Material Design for landscape view — Internally scrolling menu

Cascading menus (Desktop only)

For menus that cascade, position the menus vertically and horizontally based on their proximity to screen edges.

Developer note: Implementations of this component may vary by platform. By using standard platform implementations, you will receive any related future improvements.

Material Design cascading menus for desktop layouts — Cascading menu on desktop

Cascading dropdown menu on desktop

Dropdown menu

Action overflow menu

Menu items

Single-line display

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:

Icons and helper text, like keyboard shortcuts
Controls like checkmarks to indicate multiple selected items or states (See List controls)

Menu ordering

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 nesting

Menu items can reveal nested submenus. Ideally, limit nesting to one level deep, as it can be difficult to navigate multiple nested submenus.

Material Design menu items examples — Examples of menu items

Disabled actions

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.

Disabled actions in Material Design examples — Examples of disabled actions

Behavior

Location

Menus appear above all other in-app UI elements.

Material Design menu overlaying in-app UI elements — Example of menu appearing over all other in-app UI elements.

Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element.

Selected menu item overlays Material Design element — Do.
The currently selected menu item appears over the emitting element.

Do not display a duplicate of the selected menu item.

Material Design: Avoid showing duplicate menu items — Don’t.
Do not display a duplicate of the selected menu item.

Positioning the menu below the emitting element separates it from its context.

Material Design menus overlay their emitting element — Don’t.
Menus are positioned over their emitting element.

Dismissing menus

Dismiss a menu by tapping outside of the menu, or by tapping the emitting button (if visible).

Selecting a menu item should also dismiss the menu. An exception is when a menu allows for multiple items to be chosen, for example, by using checkmarks.

Simple Menus

Mobile or tablet

Use simple menus in lists to display the options for a specific list item.

Vertical alignment

When close to a screen edge, simple menus vertically realign to make all menu items are completely visible.

Disambiguation: In contrast to simple menus, simple dialogs can present additional detail related to the options available for a list item or provide navigational or orthogonal actions related to the primary task. Although they can display the same content, simple menus are preferred over simple dialogs because simple menus are less disruptive to the user’s current context.

Item selection

Choosing an option immediately commits the option and closes the menu.

Cancelling selection

Touching outside of the menu, or pressing the system Back button, cancels the action and closes the menu.

Simple menu example in Material Design — Example of a simple menu

When opened, simple menus attempt to vertically align the currently selected menu item with the list item. The currently selected menu item is highlighted.

Selected menu item aligns vertically, Material Design — Do.
The currently selected menu item aligns vertically over the list item.

Vertical alignment of selected menu item in Material Design — Do.
The currently selected menu item aligns vertically over the list item.

Do not arbitrarily position the first menu item over the list item.

Menu item positioned over list in Material Design — Don’t.
The first menu item is arbitrarily positioned over the list item, regardless of the currently selected menu item.

When close to a screen edge, simple menus reposition their vertical alignment so that all menu items are completely visible.

Material Design menu item repositioned vertically — Do.
The currently selected menu item normally would be positioned over the list item, but because doing so in this case would cause part of the menu to appear off-screen, the entire menu is repositioned vertically.

Simple menus appear over their emitting element, not below.

Material Design simple menus over their element — Do.
Simple menus appear over their emitting element.

Simple menus do not appear below in Material Design — Don’t.
Simple menus do not appear below their emitting element.

Menu width varies depending on string length, and on mobile is defined as a multiple of a 56dp unit.

Simple menus always maintain a 16dp margin (phone) or 24dp margin (tablet) to the left and right edges of the screen.

Material Design menu width varies with string length — Simple menu with a 16dp margin.
Each unit is 56dp wide.
Minimum width on mobile = 2 * 56dp = 112dp

If text in a simple menu wraps to a second line, use a simple dialog instead. Simple dialogs can have rows with varying heights.

Use simple dialog for Material Design multi-line menus — Do.
Use a simple dialog if any text in a simple menu wraps to a second line.

Use a simple dialog, not truncated text, in Material Design — Don’t.
Don’t truncate text in a simple menu. Use a simple dialog instead.

Menus show a persistent scroll bar when content is scrollable.

The maximum height of a simple menu should be one or more rows less than the view height. This ensures a tappable area outside of the simple menu with which to dismiss the menu.