Dropdown Composition
Actions on a thing — the row-actions menu, the account menu. Typeahead, roving focus, grouping, and dismissal are Base UI's; the surface, the separator rhythm, and the danger tone are ours.
Usage
<Dropdown trigger={<Button variant="outline">Actions</Button>} items={[ { label: 'Rename', icon: <FileText size={14} />, shortcut: '⌘R' }, { separator: true }, { label: 'Delete', icon: <Trash2 size={14} />, tone: 'danger' }, ]}/>Do
Put the destructive item last, behind a separator, and give it tone='danger'.
Don't
Use a menu for navigation between pages — a menu hides where you can go behind a click.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| trigger | ReactElement | — | Rendered as the trigger, so your Button stays your Button. |
| items / sections | MenuItem[] / MenuSection[] | — | Use items for one action set, or labelled sections when an app menu combines distinct action kinds. |
| side / align | Side | Align | 'bottom' / 'end' | Preferred placement; it flips when there is no room. |
Keyboard
| Key | Behaviour |
|---|---|
Enter / Space / ↓ | Opens |
↑ / ↓ | Moves the highlight, skipping disabled items |
| Typing | Jumps to the first matching item |
Esc | Closes and returns focus to the trigger |