Menus

Menus display a list of choices on temporary surfaces.

Android Web check Flutter iOS Not 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

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.

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

Elevation

Menus appear in front of all other permanent UI elements.

Menu appearing on top of UI body text
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 & 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 displaying a list of text items, some separated by a divider

Text list

  1. Container
  2. Text
  3. Divider
Dropdown menu displaying a list of text and icon items

Text and icon list

  1. Container
  2. Leading icon
  3. Text
  4. Divider
Dropdown menu displaying text and icon items, key commands and a cascading menu indicator

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

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.

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

Dropdown menu in a document UI, displaying a scrollable list of fonts
When content is scrollable, menus display scrollbars.

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

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

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 sheet in a mobile UI
The bottom sheet can replace an inline menu on smaller screens.

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.

Context menu elevated above a tablet UI
On larger screens, a context menu can be more appropriate.

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.

Dropdown menu below menu icon, displaying additional actions for a new contact app screen
A dropdown menu triggered by an icon on mobile.

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.

Menu of child items cascading from a parent list item
A parent list item can trigger a cascading menu containing child actions.

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 held mouse arrow
To reveal a contextual menu, tap and hold, or right click (desktop), selected text.
Diagram of a menu appearing on tap and hold, after selecting text
A contextual menu appears next to selected text.

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.

Diagram of a menu appearing after icon press
1. Tapping the icon triggers a dropdown menu.
2. Choosing a menu option doesn’t change the icon of the element generating the menu.

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.

Exposed dropdown menu displays the currently selected font above the menu
On desktop, a filled exposed dropdown menu displays the 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...

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

3 menu states in the filled style: 1. Inactive, with no menu exposed. 2. Activated, with menu exposed and a selection activated. 3. Inactive and populated, with the menu displaying the selected item
Filled exposed dropdown menu states

1. Inactive
2. Activated
3. Inactive and populated
3 menu states in the outlined style: 1. Inactive, with no menu exposed. 2. Activated, with menu exposed and a selection activated. 3. Inactive and populated, with the menu displaying 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.

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.

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.

Editable dropdown menu displaying 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 two 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.

Menu label aligned with item labels
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, showing 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 left-aligned with the icon
Outlined dropdown menu with a leading icon

States

3 by 3 grid summarizing the 9 states of the filled exposed dropdown menus
Filled exposed dropdown menu states
3 by 3 grid summarizing the 9 states of the outlined exposed dropdown menus
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...

Color

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

Diagram of the Basil app’s menu colors: 1. Background color is Surface (#FFFFFF), 2. Text is On Surface (#29302E), 3. Icons are Primary (#356859 at 54%), 4. Hover selection is 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%

Shape

Basil’s menu containers have custom corners, with 0dp corner radiuses.

Square menu corner
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...

Color

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

Diagram of 1. Container color and 2. Text color
Element Category Attribute Value
Container Surface Color
Opacity
#FFFBFA
100%
Text On Surface Color
Opacity
#442C2E
100%

Shape

Shrine’s menu containers have custom corner shapes, with 8dp long cut corners.

Diagram of cut corners
Element Category Attribute Value
Container Medium component Family
Size
Cut
8dp; 8dp; 8dp; 8dp

Specs

Minimum and maximum width

  • 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

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)

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
 

Using menus

A menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

Before you can use Material menus, you need to add a dependency to the Material Components for Android library. For more information, go to the Getting started page.

A typical menu resource looks like this:

A typical exposed dropdown menu looks like this:

See the dropdown menus and exposed dropdown menus sections for detailed usage information.

Making menus accessible

Menus are readable by most screen readers, such as TalkBack. Text rendered in menus is automatically provided to accessibility services. Additional content labels are usually unnecessary.

Android's exposed dropdown menu component APIs support both label text and helper text for informing the user as to what information is requested for a menu. While optional, their use is strongly encouraged. For more information about this component's accessibility, check out the text field's a11y section.

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 of radio buttons.

There are two types of menus: 1. Dropdown menus (overflow, context, popup, and list popup window menus), 2. Exposed dropdown menus.

Composite image of example dropdown and exposed dropdown menu types

Exposed dropdown menus

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

Note: The exposed dropdown menu is implemented through the TextInputLayout. For detailed information on Material text fields and their usage, see the TextInputLayout documentation.

Exposed dropdown menu example

API and source code:

Note:MaterialComponentsViewInflater auto-inflates <AutoCompleteTextView> to <com.google.android.material.textfield.MaterialAutoCompleteTextView> when using a non-Bridge Theme.MaterialComponents.* theme.

The following is an example of a filled exposed dropdown menu:

2 menu states with text field element: 1) has "option 1", 2) has an empty text
field and a 3-option white menu
container.

In the layout:

In code:

In the item layout (list_item.xml):

To have an outlined variation of the exposed dropdown menu, set the style to @style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu:

Menu with purple outlined text field element and 4 options. Option 1 selected.

Non editable variation

Disable the user input in the AutoCompleteTextView to have a non editable variation of the menu by setting android:inputType="none" on the AutoCompleteTextView.

Setting a default value

In order to have a pre-selected value displayed, you can call setText(CharSequence text, boolean filter) on the AutoCompleteTextView with the filter set to false.

Anatomy and key properties

The exposed dropdown menu is made of an AutoCompleteTextView within a TextInputLayout that has a dropdown menu displayed below it.

Exposed dropdown menu anatomy diagram

  1. Container
  2. Text
  3. Label
  4. Selection/Input text
  5. Trailing icon

TextInputLayout attributes (container, label, trailing icon)

To see all attributes that apply to the TextInputLayout, see the TextInputLayout documentation.

AutoCompleteTextView attributes (input text, dropdown menu)

ElementAttributeRelated method(s)Default value
Input textandroid:textsetText
getText
@null
Typographyandroid:textAppearancesetTextAppearance?attr/textAppearanceSubtitle1
Input acceptedandroid:inputTypeN/Aframework's default
Input text colorandroid:textColorsetTextColor
getTextColors
getCurrentTextColor
?android:textColorPrimary
Cursor colorN/A (color comes from the theme attr ?attr/colorControlActivated)N/A?attr/colorPrimary
Dropdown menu
container color
N/AN/A?attr/colorSurface
Dropdown menu elevationandroid:popupElevationN/A8dp

Styles

ElementStyle
Filled styleWidget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu
Outlined styleWidget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu
Filled denseWidget.MaterialComponents.TextInputLayout.FilledBox.Dense.ExposedDropdownMenu
Outlined denseWidget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu

Default style theme attribute: ?attr/textInputStyle

See the full list of styles and attrs.

Theming menus

Menus drawers support Material Theming and can be customized in terms of color, typography and shape.

Popup, overflow, and list popup window menus support Material Theming and can be customized in terms of typography.

API and source code:

The following example shows a menu with Material Theming.

White menu container with brown text showing 3 options

Implementing menu theming

Using default style theme attributes (affects all menus but does not affect other components):

In res/drawable/custom_popup_background:

Use a custom style instead of overriding ?attr/popupMenuBackground if you want to set a custom background for one type of menu:

Exposed dropdown menu theming example

Exposed dropdown menus support Material Theming and can be customized in terms of color, typography, and shape.

Note: The exposed dropdown menu is implemented through the TextInputLayout. For detailed information on how Material text fields work, see the TextInputLayout documentation.

API and source code:

The following example shows filled and outlined exposed dropdown menu types with Material Theming.

Composite image of "Show menu" button and options: gray button with pink
underline, and white button with pink
outline

Implementing exposed dropdown menu theming

Using default style theme attributes, styles and theme overlays (themes all menus but does not affect other components):

or using the style in the layout (affects only this menu):

Note: When setting a materialThemeOverlay on a custom TextInputLayout style, set autoCompleteTextViewStyle to either a @style/Widget.MaterialComponents.AutoCompleteTextView.* style or to a custom one that inherits from that.
The TextInputLayout.*.ExposedDropdownMenu styles set materialThemeOverlay that overrides autoCompleteTextViewStyle with the specific AutoCompleteTextView style needed. Therefore, you don't need to specify a style tag on the AutoCompleteTextView.

No Android implementation guidance available

Design & API Documentation

Installation

Basic Usage

HTML Structure

Styles

JavaScript Instantiation

See Importing the JS component for more information on how to import JavaScript.

Variants

Selection Group Menu

Menus can contain a group of list items that can represent the selection state of elements within the group.

Disabled Menu Items

Menu items can be disabled by adding the mdc-list-item--disabled modifier class (from MDC List). Disabled menu items will be excluded from keyboard navigation.

Anchors and Positioning

Anchored To Parent

The menu can be positioned to automatically anchor to a parent element when opened.

Anchor To Element Within Wrapper

The menu can be positioned to automatically anchor to another element, by wrapping the other element with the anchor class.

Fixed Position

The menu can use fixed positioning when being displayed.

Absolute Position

The menu can use absolutely positioned when being displayed.

Style Customization

CSS Classes

CSS ClassDescription
mdc-menuRequired on the root element
mdc-menu-surfaceRequired on the root element. See mdc-menu-surface documentation for other mdc-menu-surface classes.
mdc-listRequired on the nested ul element. See mdc-list documentation for other mdc-list classes.
mdc-menu__selection-groupUsed to wrap a group of mdc-list-item elements that will represent a selection group.
mdc-menu__selection-group-iconRequired when using a selection group to indicate which item is selected. Should contain an icon or svg that indicates the selected state of the list item.
mdc-menu-item--selectedUsed to indicate which element in a selection group is selected.

Sass Mixins

MixinDescription
width($width)Used to set the width of the menu. When used without units (e.g. 4 or 5) it computes the width by multiplying by the base width (56px). When used with units (e.g. 240px, 15%, or calc(200px + 10px) it sets the width to the exact value provided.
min-width($min-width)Sets the min-width of the menu. Use with units (e.g. 240px, 15%, or calc(200px + 10px) only.

See Menu Surface and List documentation for additional style customization options.

Accessibility

Please see Menu Button WAI-ARIA practices article for details on recommended Roles, States, and Properties for menu button (button that opens a menu).

With focus on the menu button:

  • Enter, Space & Down Arrow opens the menu and places focus on the first menu item.
  • Up Arrow opens the menu and moves focus to the last menu item.
  • The focus is set to list root element (where role="menu" is set) when clicked or touched. MDC List handles the keyboard navigation once it receives the focus.

Use setDefaultFocusState method to set default focus state that will be focused every time when menu is opened.

Focus stateDescription
DefaultFocusState.FIRST_ITEMFocuses the first menu item. Set this when menu button receives Enter, Space, Down Arrow.
DefaultFocusState.LAST_ITEMFocuses the last menu item. Set this when menu button receives Up arrow.
DefaultFocusState.LIST_ROOTFocuses the list root. Set this when menu button Clicked or Touched.
DefaultFocusState.NONEDoes not change the focus. Set this if you do not want the menu to grab focus on open. (Autocomplete dropdown menu, for example).

MDCMenu Properties and Methods

See Importing the JS component for more information on how to import JavaScript.

PropertyValue TypeDescription
openBooleanProxies to the menu surface's open property.
itemsArray<Element>Proxies to the list to query for all .mdc-list-item elements.
quickOpenBooleanProxies to the menu surface quickOpen property.
wrapFocusBooleanProxies to list's wrapFocus property.
hasTypeaheadBooleanProxies to the list's hasTypeahead property.
Method SignatureDescription
setAnchorCorner(Corner) => voidProxies to the menu surface's setAnchorCorner(Corner) method.
setAnchorMargin(Partial<MDCMenuDistance>) => voidProxies to the menu surface's setAnchorMargin(Partial<MDCMenuDistance>) method.
setAbsolutePosition(x: number, y: number) => voidProxies to the menu surface's setAbsolutePosition(x: number, y: number) method.
setFixedPosition(isFixed: boolean) => voidProxies to the menu surface's setFixedPosition(isFixed: boolean) method.
setSelectedIndex(index: number) => voidSets the list item to the selected state at the specified index.
setIsHoisted(isHoisted: boolean) => voidProxies to the menu surface's setIsHoisted(isHoisted: boolean) method.
setAnchorElement(element: Element) => voidProxies to the menu surface's setAnchorElement(element) method.
getOptionByIndex(index: number) => Element | nullReturns the list item at the index specified.
getPrimaryTextAtIndex(index: number) => stringReturns the primary text at the index specified.
getDefaultFoundation() => MDCMenuFoundationReturns the foundation.
setDefaultFocusState(focusState: DefaultFocusState) => voidSets default focus state where the menu should focus every time when menu is opened. Focuses the list root (DefaultFocusState.LIST_ROOT) element by default.
setEnabled(index: number, isEnabled: boolean) => voidSets the enabled state to isEnabled for the menu item at given index.
layout() => voidProxies to the list's layout method.
typeaheadMatchItem(nextChar: string) => numberAdds a character to the typeahead buffer and returns index of the next item in the list matching the buffer.

See Menu Surface and List documentation for more information on proxied methods and properties.

Usage within Web Frameworks

If you are using a JavaScript framework, such as React or Angular, you can create a Menu for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

MDCMenuAdapter

Method SignatureDescription
addClassToElementAtIndex(index: number, className: string) => voidAdds the className class to the element at the index specified.
removeClassFromElementAtIndex(index: number, className: string) => voidRemoves the className class from the element at the index specified.
addAttributeToElementAtIndex(index: number, attr: string, value: string) => voidAdds the attr attribute with value value to the element at the index specified.
removeAttributeFromElementAtIndex(index: number, attr: string) => voidRemoves the attr attribute from the element at the index specified.
elementContainsClass(element: Element, className: string) => booleanReturns true if the element contains the className class.
closeSurface(skipRestoreFocus?: boolean) => voidCloses the menu surface, skipping restoring focus to the previously focused element if skipRestoreFocus is true.
getElementIndex(element: Element) => numberReturns the index value of the element.
notifySelected(index: number) => voidEmits a MDCMenu:selected event for the element at the index specified.
getMenuItemCount() => numberReturns the menu item count.
focusItemAtIndex(index: number)Focuses the menu item at given index.
focusListRoot() => voidFocuses the list root element.
getSelectedSiblingOfItemAtIndex(index: number) => numberReturns selected list item index within the same selection group which is a sibling of item at given index.
isSelectableItemAtIndex(index: number) => booleanReturns true if menu item at specified index is contained within an .mdc-menu__selection-group element.

MDCMenuFoundation

Method SignatureDescription
handleKeydown(evt: Event) => voidEvent handler for the keydown events within the menu.
handleItemAction(listItem: Element) => voidEvent handler for list's action event.
handleMenuSurfaceOpened() => voidEvent handler for menu surface's opened event.
setDefaultFocusState(focusState: DefaultFocusState) => voidSets default focus state where the menu should focus every time when menu is opened. Focuses the list root (DefaultFocusState.LIST_ROOT) element by default.
setSelectedIndex(index: number) => voidSelects the list item at given index.
setEnabled(index: number, isEnabled: boolean) => voidSets the enabled state of the menu item at given index.

Events

Event NameDataDescription
MDCMenu:selected{detail: {item: Element, index: number}}Used to indicate when an element has been selected. This event also includes the item selected and the list index of that item.
No Web implementation guidance available

Using menus

A menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

Making menus accessible

Flutter's list component APIs support labeling for accessibility. For more guidance on writing labels, go to our page on how to write a good accessibility label.

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 of radio buttons.

There are two types of menus: 1. dropdown menus, 2. exposed dropdown menus.

Composite image of example dropdown and exposed dropdown menu types

Anatomy

The following are menu anatomy diagrams showing all possible elements:

Menus anatomy diagrams

  1. Container
  2. Leading icon (optional)
  3. Text
  4. Divider (optional)
  5. Command (optional)
  6. Cascading menu indicator (optional)
  7. Selection state (optional)

Container attributes

 Property
ColorUse the PopupMenuButton widget. Within this widget use the Colors property
HeightUse the PopupMenuButton widget. Within this widget use the padding property.

Leading icon attributes

 Property
Adding IconUse the PopupMenuButton widget. Within this widget use itemBuilder. Within the list of itemBuilder add a PopupMenuItem. Within the child parameter add a ListTile widget and set the leading parameter to an Icon.

Text attributes

 Property
Text labelUse the PopupMenuButton widget. Within this widget use itemBuilder. Within the list of itemBuilder add a PopupMenuItem. Within the child parameter add a ListTile widget and set the title parameter to a Text widget.
ColorFollow the steps above and then within the Text widget fill out the style parameter.
TypographyFollow the steps above and then within the Text widget fill out the style parameter.

Divider attributes

 Property
Add DividerUse the PopupMenuButton widget. Within this widget use itemBuilder. Within the list of itemBuilder add a PopupMenuDivider.

Command attributes

 Property
Adding IconUse the PopupMenuButton widget. Within this widget use itemBuilder. Within the list of itemBuilder add a PopupMenuItem. Within the child parameter add a ListTile widget and set the trailing parameter to an Icon.

Cascading menu indicator attributes

 Property
Adding cascading menuNot currently supported.

Selection state attributes

 Property
Adding selection state attributesUse the PopupMenuButton widget. Within this widget use itemBuilder. Within the list of itemBuilder add a CheckedPopupMenuItem.

Exposed dropdown menus

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

Exposed dropdown menu example

The following is an example of a dropdown menu:

Exposed Dropdown menu example listing 6 options

Theming

Menus support Material Theming and can be customized in terms of color, typography and shape.

Theming example

The following is an example of a dropdown menu:

Dropdown menu with dark brown text and grey icons

No Flutter implementation guidance available
No iOS implementation guidance available

Up next