A menu displays a list of relevant options for the user that can be triggered from a button.

Usage

A menu pops up when users interact with a button, an action, or another control. Menus allow users to select from a list of options.

• Use a menu when the number of actions exceeds the component’s action limit.

• Don’t use a menu for a single action.
• Don’t hide important actions.

Behavior and Interaction

Dropdown Menu

A dropdown menu is a list of options that a user can act on. It appears after a user taps on an icon or a button or performs a specific action.

A dropdown menu normally appears below the element that generates it.

Variations

Menus display lists of related options (options may be grouped together with a divider) as well as unrelated options. They can contain a scrollbar and icons.

Specifications

Maximum Width and Height

Maximum Width

The maximum width of a menu is 280dp on mobile. Please use multiples of 56dp.

Maximum Height

The maximum height of a menu should be at least one row less than the height of the app’s user interface.

Minimum Width

Menu with Icons

Maximum Width Menu

Resources

Material Design: Menus