Menu

Usage

A menu shows a short list of choices on a temporary surface, anchored to the control that opened it. Use it when a set of actions or options would take up too much room on the screen but still needs to stay one step away.

Design properties

Menu options

A menu with none of these switched on is a plain list of actions. Each option below is independent, so combine them as the list needs.

With header

Use when the list needs a title or context above the items.

Menu item options

These belong to the menu item, a nested component, rather than to the menu. A plain item is a label on its own. Any item can carry any combination of these.

With divider

Use to group a longer list into sections. Don’t place a divider between every item.

With supporting text

Use when an item needs a short line of context below its label.

With icons

Use when icons help people scan the list. If one item has an icon, give every item one.

Selection

Use with a dropdown input or icon button, such as for sorting.

Destructive action

Use for an item that deletes content or can’t be undone.

Behavior and interaction

Behavior

• A menu opens from an icon button, a dropdown, a touch and hold, or another control.
• It closes when the person selects an item or touches outside it.
• Menu width is set by its content, between 112dp and 280dp. Height follows the number of items and the space available.

Positioning

• Anchor the menu to the control that opened it, offset so it doesn’t cover that control.
• Open below the trigger when there is room, and above it when there isn’t.
• Keep the menu inside the viewport.

Related components

Changelog