Components
Dropdown menu
A list of actions behind a button.
shadcn/uiOverlays
shadcn/ui docs (opens in a new tab)Radix API (opens in a new tab)components/ui/dropdown-menu.tsxPreview
Installation
It's already in this Base. In another project, add it with the shadcn CLI, then switch its cn import to @/lib/utils, its icons to @/components/icons, and its text-sm and text-xs to text-ui-s and text-ui-xs.
npx shadcn@latest add dropdown-menuExamples
Actions
A label, the actions, the destructive one last.
On a row
An icon button at the end of a row, aligned to the end.
Props
The ones that change how it looks or behaves. The rest are the Radix primitive's, in its API.
| Prop | Type | Default |
|---|---|---|
| variant (item) | "default" | "destructive" | "default" |
| align (content) | "start" | "center" | "end" | "center" |
Guidelines
Use it
- Actions on one item: rename, duplicate, delete.
- The destructive action last, after a separator.
Don't
- Use it to pick a value for a form: that's a select.
Accessibility
- Arrow keys move through items, Enter picks, Escape closes.
- Typing a letter jumps to the item.