OVERLAYS / COMPONENTS

Menu

Organize contextual actions.

Live component4 documented props

About menu

Menus assist users in performing actions or navigating to a new page. They are positioned within a temporary popover container.

01

Anatomy

Shared parts, named consistently.

1V1 · COMPACT

1
ContainerRequired
The container of the Menu.
2
Menu itemRequired
A clickable item nested inside the Menu.
3
Divider
A divider for sections.
4
Group label
A label of a group of items.
5
Before slot
A slot to place an icon before the label.
6
LabelRequired
The label of the item.

Try the default

A working example with the shared V1 visual language.

When to use

Group related actions, use one helpful icon per item, and reserve destructive styling for destructive actions. Limit submenu depth.

Enter/Space opens. Arrows and typeahead navigate. Right/Left enter/leave submenus. Escape closes and restores focus.

Related components