Menu
Dropdown menu with keyboard navigation, built on usePopover
Category: overlay · WCAG 2.2-AA · overlay, menu, dropdown, floating
States
- open
- closed
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | The MenuTrigger first, followed by MenuItem/MenuSeparator children. |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-radius-md--cascivo-shadow-md--cascivo-motion-enter--cascivo-motion-exit--cascivo-color-bg-subtle
When to use
- Presenting a list of actions or commands triggered from a button
- Action lists that need arrow-key navigation and Enter/Space activation
- Grouping related commands with separators behind a single trigger
When not to use
- Selecting a persistent value from options — use Select or MultiSelect
- Right-click contextual actions on an element — use ContextMenu
- A single non-list action — use a Button
How to build an accessible Menu in React →
Examples
Basic
<Menu>
<MenuTrigger>Options</MenuTrigger>
<MenuItem onSelect={rename}>Rename</MenuItem>
<MenuItem onSelect={duplicate}>Duplicate</MenuItem>
</Menu>With separator and disabled item
<Menu>
<MenuTrigger aria-label="More actions">…</MenuTrigger>
<MenuItem onSelect={share}>Share</MenuItem>
<MenuSeparator />
<MenuItem onSelect={remove} disabled>Delete</MenuItem>
</Menu>Related components
- ContextMenu — Use ContextMenu for right-click activation on a target element
- Select — Use Select when the user is choosing a value rather than firing an action
- Button — A button (MenuTrigger) opens the menu