Intro

A menu displays a list of options on a temporary container.

Usage

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

Do’s

  • Use a menu when the number of actions exceeds the components action limit.

Don’ts

  • Do not use a menu for a single action.
  • Do not hide important actions.

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 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) as well as unrelated options.

Menu With a Scroll Bar

Menu With Icons

Maximum Width & Height

Max Width

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

Maximum Height

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

Maximum width of the menu is 280dp on mobile.
Maximum width of the menu is 280dp on mobile.

Specs

Menu



Menu with Icons



Maximum Width Menu



Sample Element Alpha Hex
Container #FFFFFF
Text #32363A
Disabled text #80032363A or #32363A at 50% opacity
Dropdown icon #6A6D70
Divider #EEEEEF
Selected item #E5F0FA