Overlays
DropdownMenu
A menu of actions.
When to reach for it
Examples
default
Notes
Radix DropdownMenu root + trigger, re-exported as typed passthroughs.
Props
Takes no props of its own.
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
DropdownMenuContent
A menu surface.
A menu is a list of ACTIONS. If the items navigate somewhere, they belong in a nav; if they set a value, that is a Select or a RadioGroup — Radix has menu variants for both, and a plain item pretending to be a choice loses the checked state a screen reader needs.
Also accepts everything in ComponentProps<typeof DropdownMenuPrimitive.Content>. Those are forwarded to the underlying element and are not listed row by row.
DropdownMenuItem
A menu row.
Highlight is driven by Radix's data-highlighted, which covers both pointer hover and keyboard focus — styling :hover alone leaves the keyboard user unable to see where they are.
| Prop | Type | Default | Description |
|---|---|---|---|
| destructive | boolean | false | Paints the row as destructive. Use for delete, revoke, disconnect. |
| icon | LucideIcon | Optional leading icon, rendered before the label. |
Also accepts everything in ComponentProps<typeof DropdownMenuPrimitive.Item>. Those are forwarded to the underlying element and are not listed row by row.
DropdownMenuSeparator
Hairline divider between menu groups.
Takes no props of its own.
DropdownMenuLabel
Mono eyebrow heading for a group of items.
Takes no props of its own.
Re-exports
DropdownMenu = DropdownMenuPrimitive.RootRadix DropdownMenu root + trigger, re-exported as typed passthroughs.
DropdownMenuTrigger = DropdownMenuPrimitive.TriggerAccessibility
- Highlight is driven by data-highlighted, which covers hover AND keyboard focus — styling :hover alone leaves the keyboard user unable to see where they are.