Theme
Menu
A list of actions, opened from a button in a MenuTrigger.
Examples
Props
Menu
A list of actions, opened from a button in a MenuTrigger. Arrow keys move, typing jumps, Enter acts, Escape closes and returns focus to the button.
Also takes 93 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
MenuItem
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | |
icon? | ReactNode | — | An icon before the label, from |
shortcut? | string | — | The keyboard shortcut for the same action, shown at the end. |
danger? | boolean | false | For actions that destroy something. |
description? | ReactNode | — | A second line under the label, read as the item's description. |
Also takes 97 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
MenuSection
A labelled group of menu items.
| Prop | Type | Default | Description |
|---|---|---|---|
title? | string | — | |
children | ReactNode | — |
Also takes 82 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
Keyboard
| Key | Does |
|---|---|
| Enter or Space or ArrowDown | Opens the menu on the first item |
| ArrowUp or ArrowDown | Move through the items |
| Type a letter | Jumps to the item that starts with it |
| Enter | Runs the focused item |
| Escape | Closes the menu and returns focus |
Accessibility
- Sections are labelled groups.
- An item is named from its content, shortcut included, so its accessible name matches what is shown (WCAG 2.5.3).
- Rendered in a portal at the end of the document, so it is not clipped by an overflow ancestor.
- Entering and leaving animations use motion tokens, which are zero under prefers-reduced-motion.