DropdownMenu
A list of actions launched from a button, with separators, shortcuts and checkable items.
A list of actions. Group related items with DropdownMenuSeparatorand put destructive actions last, separated — so the item next to “Delete” is never something you meant to click.
Default
Labels, items, checkable items, separators and shortcut chips. DropdownMenuShortcut takes keys as an array so each key renders as its own chip.
Props
DropdownMenu
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
defaultOpen | boolean | — | Uncontrolled initial state. |
onOpenChange | (open: boolean) => void | — | Called whenever it opens or closes. |
DropdownMenuContent
| Prop | Type | Default | Description |
|---|---|---|---|
side | FloatingSide | — | Preferred side. |
align | FloatingAlign | — | start, center or end. |
sideOffset | number | — | Gap between trigger and menu. |
DropdownMenuItem
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean | — | Skipped by keyboard navigation. |
inset | boolean | — | Indents to align with items that have a check or icon. |
onSelect | (event: MouseEvent<HTMLDivElement>) => void | — | Fires when the item is chosen. |