Intro

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

Menu
Menu

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.

Do
  • Use a menu when the number of actions exceeds the component’s action limit.
Don't
  • 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.

Menu on mobile (left) and tablet (right)
Menu on mobile (left) and tablet (right)

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.

Menu with a Scrollbar

Menu with a selected item and a scrollbar
Menu with a selected item and a scrollbar

Menu With Icons

Menu with icons and a divider
Menu with icons and a divider

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.

Menu maximum width
Menu maximum width

Minimum Width

Menu minimum width
Menu minimum width
Specifications of menu minimum width
Specifications of menu minimum width

Menu with Icons

Menu with icons and a divider
Menu with icons and a divider
Specifications of menu with icons and a divider
Specifications of menu with icons and a divider

Maximum Width Menu

Menu maximum width
Menu maximum width
Specifications of menu maximum width
Specifications of menu maximum width

Resources

Material Design: Menus