Menus

Menus display a list of choices on temporary surfaces.

Developer documentation

Platform

Status

Android

Available

iOS

Planned

Web

Available

Flutter

Available


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

Menus are unobtrusive, contextual, and scannable.

Read More

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 make a selection from multiple options. They are less prominent and take up less space than selection controls, such as a set...

Read More

Menus allow users 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.

List of options in a dropdown menu

Dropdown menus

Dropdown menus display a list of options, triggered by an icon, button, or action. Their placement varies based on the element that opens them.

Exposed dropdown menu with an item selected

Exposed dropdown menus

Exposed dropdown menus display the currently selected menu item above the list of options. Some variations can accept user-entered input.

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...

Read More

Elevation

Menus appear in front of all other permanent UI elements.

Menu appearing on top of UI"

Menus appear at a higher elevation than 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.

Desktop UI showing 32 dp for each menu row and another 32 dp padding between dropdown and bottom of screen

The rows in this menu are 32dp tall. That’s also the space used between the menu and the bottom of the screen.

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.

Desktop UI showing a parent dropdown menu with a cascading menu to its right

Menus can change their position to avoid being truncated by the screen or browser’s edge.


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.

Dropdown menu a list of text items, a divider divides some items up

Text list

  1. Container
  2. Text
  3. Divider
Dropdown menu a list of text and icon items, a divider divides some items up

Text and icon list

  1. Container
  2. Leading icon
  3. Text
  4. Divider
Dropdown menu with text and icon items, key commands and a cascading menu indicator, a divider divides some items up

Text, icon, and keyboard command list

  1. Container
  2. Leading icon
  3. Text
  4. Divider
  5. Command
  6. Cascading menu indicator
Dropdown menu with 1 out of 6 items selected, a check icon marks the item that is selected

Text with selection state list

  1. Selection state

Actions

Action states inside menus

Read More

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.

Menu shows 3 items that are disabled, the text color of disabled items are lighter than the active items

The Redo action is disabled when that action isn’t available, and the Cut and Copy actions are disabled until content is selected.


Behavior

Scrolling

If not all menu items are displayed at once, menus can be scrollable. In this state, menus show a persistent scrollbar.

Read More

If not all menu items are displayed at once, menus can be scrollable. In this state, menus show a persistent scrollbar.

Dropdown menu in fonts UI font has a scrollable list of fonts to select from

When its content is scrollable, menus display scrollbars.

Motion

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...

Read More

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 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).

Menus at different positions on screen open in different ways, adapting to the space available.

By default, menus open with an entrance animation. However, on desktop, menus can skip the animation and open instantly instead.

  1. Mobile menus have entrance animations
  2. Desktop menus have the option to open instantly

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...

Read More

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...

Read More

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.

dropdown menu below icon displaying additional actions for a new contact app screen

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 right or left of parent list items, depending on where there is room to expand child list items.

menu cascading child items from parent 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.

menu appearing below a mouse tap and held mouse arrow
diagram demonstrates a menu appearing on tap and hold, after selecting text

Behavior

When an option is chosen from a dropdown menu, the element that generates it remains the same.

Read More

When an option is chosen from a dropdown menu, the element that generates it remains the same.

diagram demonstrates icon press that triggers a menu to open

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...

Read More

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.

Exposed dropdown menu displays the currently selected item (in this case, a font selection) above the menu.

>

On desktop, a filled exposed dropdown menu displays the currently selected item, above the menu.

Exposed dropdown menu in a form

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...

Read More

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).

series of 3 states in the filled style: 1. Inactive, no menu is exposed. 2. Activated, menu is exposed and a selection is activated. 3. Inactive and populated, menu displays the selected item

Filled exposed dropdown menu states

1. Inactive
2. Activated
3. Inactive and populated

series of 3 states in the outlined style: 1. Inactive, no menu is exposed. 2. Activated, menu is exposed and a selection is activated. 3. Inactive and populated, menu displays the selected item

Outlined exposed dropdown menu states

1. Inactive
2. Activated
3. Inactive and populated

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.

Read More

An exposed dropdown menu is positioned below the element that generates the dropdown. Alternatively the filled and outlined variations can open a native picker.

The menu appears below the text field on desktop and mobile. On mobile, a native picker can instead be used.

Variation

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...

Read More

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.

editable dropdown menu displays the currently selected font size.

A user can also enter a value not listed in the menu, such as seven.

Filled dropdown menu

A filled dropdown menu looks like a filled text field. It displays the currently selected menu item above the menu.

dropdown menu in the filled style, the menu shows 4 items for users to select from

Filled dropdown menu

The menu container corners furthest from the menu control have a 4dp radius.

menu container has 2 rounded, 4dp radius, corners

Filled dropdown menu

Top corners: 0dp radius
Bottom corners (shaped): 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.

Filled dropdown menu with a leading icon

Outlined dropdown menu

An outlined dropdown menu looks like an outlined text field. It displays the currently selected menu item above the menu.

dropdown menu in the outlined style, the menu shows 4 items for users to select from

Outlined dropdown menu

For outlined dropdown menus, all corners of the menu container have a 4dp radius.

all 4 corners on the menu container are rounded with a 4dp radius

Outlined dropdown menu

All corners: 4dp radius

Forms with outlined dropdown menus should align the menu label with the icon.

outlined dropdown menu with label aligned left aligned with the icon

Outlined dropdown menu with a leading icon

States

Filled exposed dropdown menu states

Outlined exposed dropdown menu 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...

Read More

This recipe app’s menus have been customized using Material Theming. Areas of customization include color and typography.

Basil’s customized menu

Color

Basil’s menus use custom color on four elements: the menu container, text, icon, and hover overlay.

diagram denoting the colors of the menu: 1. Menu background color is categorized as Surface (#FFFFFF), 2. text in the menu uses On Surface (#29302E), 3. Icons in the menu is uses Primary (#356859 at 54%), 4. Hovering on menu items uses Primary (#356859 at 4%)

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.

Sample text written in Montserrat Medium in Body 1

Element

Category

Attribute

Value

Text

Body 1

Typeface

Font

Size

Case

Lekton

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...

Read More

This retail app’s menus have been customized using Material Theming. Areas of customization include color and typography.

Shrine’s customized menu uses 4 cut corners

Shrine’s customized menu

Color

Shrine’s menus use custom color on two elements: the menu container and text.

diagram of 1. Container and 2. Text in the container

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.

Sample text written in Rubik Regular in Body 1

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

14dp #000000de #ffffff R255 G255 B255 Elevation 8dp All corners Rounded: 4dp List All measurements are displayed in device-independent pixels (dps) 14dp #000000de #ffffff R255...

Read More
  • Measurement 56
  • Measurement 56
  • Measurement 112
  • Measurement 8
  • Measurement 8
  • Measurement 16
  • Measurement 16
  • Measurement 48
  • Measurement C
  • Measurement 48
  • Measurement 56
  • Measurement 56
  • Measurement 56
  • Measurement 56
  • Measurement 56
  • Measurement 280
  • Measurement 8
  • Measurement 8
  • Measurement 48
  • Measurement 48
  • Measurement C
  • Measurement C
  • Measurement 16
  • Measurement 16

Dropdown

14dp #000000de Elevation 8dp All corners Rounded: 4dp List All measurements are displayed in device-independent pixels (dps) 14dp #000000de 14dp #000000de #00014 R0 G1 B4...

Read More

Mobile

  • Measurement 44
  • Measurement 144
  • Measurement 128
  • Measurement 40
  • Measurement 16
  • Measurement 8
  • Measurement 8
  • Measurement 4
  • Measurement 24
  • Measurement 32
  • Measurement 8
  • Measurement 8
  • Measurement 1
  • Measurement 32
  • Measurement 8
  • Measurement 48
  • Measurement 144
  • Measurement 8
  • Measurement 12
  • Measurement 4
  • Measurement 16
  • Measurement 8
  • Measurement C
  • Measurement C
  • Measurement 24

Desktop

  • Measurement 48
  • Measurement 48
  • Measurement 8
  • Measurement 8
  • Measurement 8
  • Measurement 8
  • Measurement C
  • Measurement 24
  • Measurement 24
  • Measurement 1
  • Measurement 20
  • Measurement 24

Dropdown (Desktop)

14dp #000000de #ffffff R255 G255 B255 Elevation 8dp All corners Rounded: 4dp Dividers Dividers List All measurements are displayed in device-independent pixels (dps)

Read More

Dense

  • Measurement 32
  • Measurement 320
  • Measurement 8
  • Measurement 8
  • Measurement 1
  • Measurement 8
  • Measurement 24
  • Measurement 16
  • Measurement 15
  • Measurement 56
  • Measurement 32
  • Measurement 8
  • Measurement 8
  • Measurement 8