Menu
A list of actions, plus the items it's built from. Pair it with Popover for a real dropdown.
It's the list, not the dropdown
Menu renders a panel of items and nothing else — no trigger, no open state, no positioning. Wrap it in Popover to get the dropdown behaviour, which keeps the two concerns separable when you need a menu inline or in a sheet instead.
Item states
Keep destructive for things that can't be undone, and put it last — it's the item people least want to hit by accident.
Menu props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | MenuItem elements. | |
| aria-label | string | Names the menu for screen readers. Worth setting, since the trigger's label isn't attached to the list. | |
| minWidth | number | 208 | Minimum width in px, so short labels don't produce a cramped panel. |
MenuItem props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | Item label. | |
| icon | ReactNode | Leading icon as an element, e.g. <Pencil size={16} />. | |
| shortcut | string | Right-aligned keyboard hint. Display only: you still bind the key yourself. | |
| state | 'default' | 'checked' | 'disabled' | 'destructive' | 'default' | Checked marks a toggled option; destructive tints the row for irreversible actions. |
| onSelect | () => void | Fires when the item is chosen. |