Menu
interactiveTrigger button plus ARIA menu with roving tabindex, disabled items, link items, end alignment, and destructive item treatment.
Preview
Usage
import { Menu } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';
<Menu
label="Actions"
items={[
{ label: 'Edit details', onSelect: edit },
{ label: 'Duplicate record', onSelect: duplicate },
{ label: 'Archive record', disabled: true },
{ label: 'Delete record', danger: true, onSelect: deleteRecord },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | JSX.Element | required | Trigger button content |
items | MenuItem[] | required | Menu item definitions |
align | 'start' | 'end' | 'start' | Horizontal popover alignment relative to the trigger |
id | string | generated | Stable root id used to derive trigger and menu ids |
disabled | boolean | false | Disables the trigger button |
aria-label | string | -- | Accessible label override for the trigger button |
menuLabel | string | -- | Accessible label for icon-only menus |
class | string | -- | Additional classes on the root wrapper |
MenuItem interface
| Field | Type | Description |
|---|---|---|
id | string | Optional stable id for the item |
label | JSX.Element | Visible item label |
href | string | Renders the item as a link when set |
disabled | boolean | Marks the item unavailable and skips it during roving focus |
danger | boolean | Applies destructive action treatment |
onSelect | () => void | Called when an enabled item is selected |
Accessibility
- ARIA: Trigger uses
aria-haspopup="menu",aria-expanded, andaria-controls. Popover usesrole="menu"; items userole="menuitem". - Keyboard: Enter, Space, and ArrowDown open the menu at the first item. ArrowUp opens at the last item.
- Roving tabindex: ArrowUp/ArrowDown move through enabled items, Home/End jump to bounds, and disabled items are skipped.
- Dismissal: Escape closes and restores focus to the trigger. Pointer down outside the menu also closes it.
- Selection: Enter, Space, pointer click, or link activation selects an enabled item and closes the menu.
Do / Don't
Do
Use menus for compact action sets where each item performs a command or navigates to a related destination.
Don't
Don't put form controls or complex interactive content inside a menu item list.