Menu

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

One common use case for Menus is the Exposed Dropdown Menu, integrated into TextField (often called a “Select”).

Exposed Dropdown Menu (Select)

Use TextField with type="select" to create a dropdown menu. Pass MenuItem components as children to define the options.

Preview

Code

Color options

Menus have two color mappings:

• Standard: Surface-based, lower visual emphasis.
• Vibrant: Tertiary-based, higher visual emphasis.

Preview

Code

Menu Dividers

Vertical menu items can be grouped by adding a divider or small gap. Use groups to bundle similar actions together.

Preview

Code

Grouped Menu Items

Use MenuGroup to visually divide menu items into distinct groups with a gap and separator.

Preview

Code

Link Menu Items

Menu items can be used as navigation links using the href prop.

Preview

Code

Toggle Menu Items

Menu items can be used as toggle buttons using the onToggle prop.

Preview

Code

Scrollable Menu

Menus can scroll when all menu items can’t display at once.

Preview

Code

Filter Chip Menu

A menu can be triggered by a Filter Chip.

Preview

Code

Submenus

Submenus can be created by passing a Menu component to the subMenu prop of a MenuItem.

Preview

Code

Icon Button Menu

Menus are often triggered by an icon button, such as the “kebab” menu (three vertical dots).

Preview

Code

Context Menu

Menus can be opened via right-click interaction (context menu).

Preview

Code

Anatomy

1. Menu item
2. Leading icon (optional)
3. Menu item text
4. Trailing icon (optional)
5. Badge (optional)
6. Trailing text (optional)
7. Container
8. Supporting text (optional)
9. Label text (optional)
10. Gap (optional)
11. Divider (optional)