Search for a command to run...
A menu of actions anchored to a trigger. Glass surface, brand-tinted indicators, keyboard nav. Use for object-specific actions ("…" or "Options" buttons on cards and rows). For free-form content, reach for `Popover`; for picking one of many, `Select` or `Combobox`.
Pass asChild on the trigger so your own Button / IconButton carries the visual. DropdownMenuItem is the workhorse — for shortcuts, append <DropdownMenuShortcut> inside. For multi-select state, swap to DropdownMenuCheckboxItem or DropdownMenuRadioItem (they reserve right-aligned space for a brand-tinted check).
DropdownMenuThe state container. Forwards every Radix DropdownMenu.Root prop.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Uncontrolled initial state. |
onOpenChange | (open: boolean) => void | — | Fires when the menu opens or closes. |
modal | boolean | true | Trap focus + block outside interaction. Leave on unless you have a specific reason to opt out. |
DropdownMenuTriggerOpens the menu on click / Space / Enter / ↓. Use asChild to project the behavior onto your own component.
DropdownMenuContentThe floating menu. Portaled to the document root. Forwards every Radix DropdownMenu.Content prop.
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "bottom" | Preferred side. Floating-UI flips when the preferred side would clip outside the viewport. |
sideOffset | number | 6 | Gap (px) between trigger and menu. |
align | "start" | "center" | "end" | "start" | Alignment along the cross-axis (anchored to the trigger's leading edge by default). |
collisionPadding | number | Padding | 0 | Viewport padding the menu stays inside when colliding with the edge. |
className | string | — | Set widths (w-56, w-72) for visual rhythm; the menu always has min-w-48 so it never pinches. |
Content sets origin-(--radix-dropdown-menu-content-transform-origin) so it scales from the trigger.
DropdownMenuItemA clickable row. Forwards every Radix DropdownMenu.Item prop.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "default" | destructive tints text + hover with the error color; icons inherit text-fg-error. |
inset | boolean | false | Reserve left padding for an absent checkbox/radio column so the row aligns with CheckboxItem / RadioItem siblings. |
disabled | boolean | false | Visually dimmed; keyboard nav skips it. |
onSelect | (event: Event) => void | — | Fires on click + keyboard select. Call event.preventDefault() to keep the menu open. |
DropdownMenuCheckboxItem / DropdownMenuRadioItemSame hover/focus chrome as DropdownMenuItem, but with pr-8 to reserve space for the right-aligned brand-tinted check indicator.
DropdownMenuCheckboxItem — independent toggle. Pass checked + onCheckedChange.DropdownMenuRadioItem — exclusive selection inside a DropdownMenuRadioGroup (which carries value + onValueChange).DropdownMenuLabelLow-emphasis cluster name (text-fg-low text-xs font-medium). Doesn't activate on click. Pair with DropdownMenuSeparator to break the menu into named sections.
DropdownMenuSeparatorA bg-sand-9/12 (matches border-subtle) horizontal rule.
DropdownMenuShortcutml-auto text-xs text-fg-low. Renders at the right edge of an item, brightens to text-fg-mid when the row is hovered/highlighted.
DropdownMenuSub / DropdownMenuSubTrigger / DropdownMenuSubContentA nested menu. SubTrigger shares chrome with Item (and gets a trailing ChevronRightIcon); SubContent shares chrome with Content. Open via hover, →, or click.
DropdownMenuGroup / DropdownMenuRadioGroupPure semantic wrappers (no styling) — group related items for ARIA so screen readers announce the cluster.
Use DropdownMenu for object-specific actions — Edit / Duplicate / Delete on a row, table
column hide/show, sort order. Each item is a discrete command.
Mark dangerous rows variant="destructive". The red tint + icon color is the only thing
standing between a careful user and a regret — don't omit it.
Reach for CheckboxItem / RadioItem when items represent state toggles (visible columns,
sort by, density mode). The brand-tinted check on the right reads as "the menu's UI for this
flag" rather than "click to perform action".
Append <DropdownMenuShortcut>⌘ S</DropdownMenuShortcut> for power-user hints. The shortcut
sits at the end of the row and brightens with the hover state — it teaches without shouting.
Use a DropdownMenu when the user really needs free-form input (a form, a search field, a
small toolbar). Popover is the right tool — it holds arbitrary content and doesn't trap focus
in a menu role.
Stuff 10+ items in a flat menu. Either group with DropdownMenuLabel + Separator or split
into a DropdownMenuSub cluster. Past ~12 rows the eye gives up.
Mount a DropdownMenu where the trigger isn't visible. The menu open animation + keyboard
accelerator (↓) only make sense when the user can see what they're activating.