Dropdown menushadcn
A list of actions or options behind a button.
Actions- Install
- npx shadcn add dropdown-menu
- Import from
- @/components/ui/dropdown-menu
- Guidance
- draft · v0.1.0
Examples
As installed from shadcn – rendering in jsp-ds tokens through the bridge.
Guidance
When to use
- A list of actions behind one button: an account menu, row actions, "more".
- Checkable options that change a view (show archived, sort order).
When not to use
- To choose a value in a form – use Select or Radio group.
- For navigation – use links or a navigation menu.
Rules
- Group related items with separators; a label names a group.
- Destructive items go last with
variant="destructive", and confirm before acting. - An icon-only trigger needs an
aria-labelthat names the thing (Actions for Q3 report).
Spec
The variables this component reads, and the jsp-ds token behind each, resolved live. Switch mode to see them change.
| Token | CSS variable | Value now |
|---|---|---|
| color.surface.defaultT-3: surface.overlay to come | --popover | … |
| color.text.default | --popover-foreground | … |
| color.border.subtle | --border | … |
| shadow.lg | --shadow-lg | … |
Install
Terminal
npx shadcn add dropdown-menuImport
import { DropdownMenu } from "@/components/ui/dropdown-menu"From shadcn’s own registry. Don’t edit the installed file – jsp-ds styles it through the bridge, and fixes go in styles/overrides.css with an issue.