Updated: November 11, 2020
Latest Version 0.9
Menus
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.
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 |