Usage
A menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.
Principles
Nimble
Menus should be easy to open, close, and interact with.
Contextual
Menu content should be suited to user needs.
Scannable
Menu items should be easy to scan.
Types
Menus allow users to make a selection from multiple options. They are less prominent and take up less space than selection controls, such as a set...
Menus allow users to make a selection from multiple options. They are less prominent and take up less space than selection controls, such as a set of radio buttons.
Placement
Menus appear in front of all other permanent UI elements. The maximum height of a menu should be at least one row less than the...
Elevation
Menus appear in front of all other permanent UI elements.
Height
The maximum height of a menu should be at least one row less than the height of the app’s UI.
Position
Menus should be positioned relative to the edge of the screen or browser. They typically appear next to (or in front of) the element that generates them. If they are in a position to be cut off by the browser or screen’s edge, the menu can instead appear to the left, right, or above the element that generates it.
Anatomy
Menus display lists of related options (which can be grouped together) as well as unrelated options. Menus appear when a user taps an interactive UI element such as an icon, button, action, or content, such as selected items or text.
Text list
- Container
- Text
- Divider
Text and icon list
- Container
- Leading icon
- Text
- Divider
Text, icon, and keyboard command list
- Container
- Leading icon
- Text
- Divider
- Command
- Cascading menu indicator
Text with selection state list
- Selection state
Actions
Action states inside menus
Disabled actions
Display actions as disabled when they can only be used sometimes, under certain conditions. They should be displayed as disabled rather than removing them.
Behavior
Scrolling
If not all menu items are displayed at once, menus can be scrollable. In this state, menus show a persistent scrollbar.
If not all menu items are displayed at once, menus can be scrollable. In this state, menus show a persistent scrollbar.
Transitions
Menus open using a scale animation (an animation that shows an element grow in size). The animation creates a relationship between the menu and the...
Menus use a fade transition pattern to enter and exit the screen. The animation creates a relationship between the menu and the action that generates the menu.
Position
A menu’s position on screen affects where and how it will appear. If opened at the top of the screen, it will expand downwards (to avoid being cropped).
By default, menus open with an entrance animation. However, on desktop, menus can skip the animation and open instantly instead.
Scaling and adaptation
Bottom sheets are an alternative to inline menus or simple dialogs on mobile devices.
Bottom sheets are an alternative to inline menus or simple dialogs on mobile devices. They create space to display additional items, longer descriptions, and iconography.
Bottom sheets containing a set of actions on mobile can become a context menu on larger screens in order to preserve the intent and context of the primary content.
Dropdown menu
Usage
A dropdown menu is a compact way of displaying multiple choices. It appears upon interaction with an element (such as an icon or button) or...
A dropdown menu is a compact way of displaying multiple choices. It appears upon interaction with an element (such as an icon or button) or when users perform a specific action.
Placement
Dropdown menus are positioned relative to both the element that generates them and the edges of the screen or browser. They can appear in front...
Dropdown menus are positioned relative to both the element that generates them and the edges of the screen or browser. They can appear in front of, beside, above, or below the element that generates them.
Default placement
A dropdown menu is typically positioned below the element that generates it.
Cascading menu (Desktop only)
Cascading menus allow users to choose from a large variety of choices, by displaying menus with multiple levels of hierarchy.
They are organized into menus of parent list items that contain child list items. Child list items appear to the right or left of parent list items, depending on where there is room to expand child list items.
Contextual menu
Contextual menus aren’t triggered by a consistent UI element. They appear next to where a user taps, and their actions can vary based on the tap target.
Behavior
When an option is chosen from a dropdown menu, the element that generates it remains the same.
When an option is chosen from a dropdown menu, the element that generates it remains the same.
Exposed dropdown menu
Usage
Exposed dropdown menus display the currently selected menu item above the menu. They can be used only when a single menu item can be chosen...
Exposed dropdown menus display the currently selected menu item above the menu.
They can be used only when a single menu item can be chosen at a time.
Behavior
Upon selecting an item, an exposed dropdown menu updates to display that item. In some cases, it can accept and display user input (whether or...
Upon selecting an item, an exposed dropdown menu updates to display that item. In some cases, it can accept and display user input (whether or not it’s listed as a menu choice).
Placement
An exposed dropdown menu is positioned below the element that generates the dropdown. Alternatively the filled and outlined variations can open a native picker.
An exposed dropdown menu is positioned below the element that generates the dropdown. Alternatively the filled and outlined variations can open a native picker.
Variations
An exposed dropdown menu can be customized to have a different appearance or behavior. An editable dropdown menu displays the currently selected menu item above...
An exposed dropdown menu can be customized to have a different appearance or behavior.
Editable dropdown menu
An editable dropdown menu displays the currently selected menu item above the menu. A user can enter a value that’s not listed in the menu. You can restrict the types of values that users can enter to certain types. For example, you can set the menu to only accept positive numbers.
Filled dropdown menu
A filled dropdown menu looks like a filled text field. It displays the currently selected menu item above the menu.
The menu container corners furthest from the menu control have a 4dp radius.
When using a leading icon with a filled dropdown menu, the floating label and the menu items must be aligned with one another.
Outlined dropdown menu
An outlined dropdown menu looks like an outlined text field. It displays the currently selected menu item above the menu.
For outlined dropdown menus, all corners of the menu container have a 4dp radius.
Forms with outlined dropdown menus should align the menu label with the icon.
States
Theming
Basil Material theme
This recipe app’s menus have been customized using Material Theming. Areas of customization include color and typography. Basil is a recipe app that uses Material...
This recipe app’s menus have been customized using Material Theming. Areas of customization include color and typography.
Color
Basil’s menus use custom color on four elements: the menu container, text, icon, and hover overlay.
Element | Category | Attribute | Value |
---|---|---|---|
Container | Surface | Color Opacity |
#FFFFFF 100% |
Text | On Surface | Color Opacity |
#29302E 100% |
Icon | Primary | Color Opacity |
#356859 54% |
Hover overlay | Primary | Color Opacity |
#356859 4% |
Typography
Basil’s menu text uses custom typography.
Element | Category | Attribute | Value |
---|---|---|---|
Text | Body 1 | Typeface Font Size Case |
Montserrat Medium 16 Title case |
Shape
Basil’s menu containers have custom corners, with 0dp corner radiuses.
Element | Category | Attribute | Value |
---|---|---|---|
Container | Medium component | Family Size |
Rounded 0dp; 0dp; 0dp; 0dp |
Shrine Material theme
This retail app’s menus have been customized using Material Theming. Areas of customization include color and typography. Shrine is a lifestyle and fashion brand that...
This retail app’s menus have been customized using Material Theming. Areas of customization include color and typography.
Color
Shrine’s menus use custom color on two elements: the menu container and text.
Element | Category | Attribute | Value |
---|---|---|---|
Container | Surface | Color Opacity |
#FFFBFA 100% |
Text | On Surface | Color Opacity |
#442C2E 100% |
Typography
Shrine’s menu text uses custom typography.
Element | Category | Attribute | Value |
---|---|---|---|
Text | Body 1 | Typeface Font Size Case |
Rubik Regular 16 Title case |
Shape
Shrine’s menu containers have custom corner shapes, with 8dp long cut corners.
Element | Category | Attribute | Value |
---|---|---|---|
Container | Medium component | Family Size |
Cut 8dp; 8dp; 8dp; 8dp |
Specs
Minimum and maximum width
- 56 Measurement 56
- 56 Measurement 56
- 112 Measurement 112
- 8 Measurement 8
- 8 Measurement 8
- 16 Measurement 16
- 16 Measurement 16
- 48 Measurement 48
- C Measurement C
- 48 Measurement 48
#ffffff
R255 G255 B255
- Shape
All corners
Rounded: 4dp
- 56 Measurement 56
- 56 Measurement 56
- 56 Measurement 56
- 56 Measurement 56
- 56 Measurement 56
- 280 Measurement 280
- 8 Measurement 8
- 8 Measurement 8
- 48 Measurement 48
- 48 Measurement 48
- C Measurement C
- C Measurement C
- 16 Measurement 16
- 16 Measurement 16
#ffffff
R255 G255 B255
- Shape
All corners
Rounded: 4dp
Dropdown
Mobile
- 44 Measurement 44
- 144 Measurement 144
- 128 Measurement 128
- 40 Measurement 40
- 16 Measurement 16
- 8 Measurement 8
- 8 Measurement 8
- 4 Measurement 4
- 24 Measurement 24
- 32 Measurement 32
- 8 Measurement 8
- 8 Measurement 8
- 1 Measurement 1
- Shape
All corners
Rounded: 4dp
- 32 Measurement 32
- 8 Measurement 8
- 48 Measurement 48
- 144 Measurement 144
- 8 Measurement 8
- 12 Measurement 12
- 4 Measurement 4
- 16 Measurement 16
- 8 Measurement 8
- C Measurement C
- C Measurement C
- 24 Measurement 24
#00014
R0 G1 B4
#ffffff
R255 G255 B255
- Shape
All corners
Rounded: 4dp
Desktop
- 48 Measurement 48
- 48 Measurement 48
- 8 Measurement 8
- 8 Measurement 8
- 8 Measurement 8
- 8 Measurement 8
- C Measurement C
- 24 Measurement 24
- 24 Measurement 24
- 1 Measurement 1
- 20 Measurement 20
- 24 Measurement 24
#ffffff
R255 G255 B255
- Shape
All corners
Rounded: 4dp
- Components open_in_new
Dividers
Dropdown (Desktop)
Dense
- 32 Measurement 32
- 320 Measurement 320
- 8 Measurement 8
- 8 Measurement 8
- 1 Measurement 1
- 8 Measurement 8
- 24 Measurement 24
- 16 Measurement 16
- 15 Measurement 15
- 56 Measurement 56
- 32 Measurement 32
- 8 Measurement 8
- 8 Measurement 8
- 8 Measurement 8
#ffffff
R255 G255 B255
- Shape
All corners
Rounded: 4dp
- Components open_in_new
Dividers
- Components open_in_new
Dividers