Components
Dropdown Menu
A menu of actions or options anchored to a trigger button, built on Radix UI's DropdownMenu primitive — with items, labels, separators, shortcuts, checkboxes, radio groups, and sub-menus.
Install
npx shadcn@latest add https://atomx.acau.net/r/dropdown-menu.jsonUsage
Use Dropdown Menu for a set of actions or options revealed from a button — account menus, row actions, "more" overflow menus. Reach for Select instead when the user is picking a single value for a form field, and Context Menu when the menu should open on right-click rather than from a visible trigger.
Wrap the trigger element in DropdownMenuTrigger (use asChild to render your own button) and place the menu items inside DropdownMenuContent. Use DropdownMenuLabel for section headings and DropdownMenuSeparator between groups.
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">Open menu</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Preview
Props
| Component | Notable props |
|---|---|
DropdownMenuTrigger | Any element. asChild to render the child as the trigger. |
DropdownMenuContent | sideOffset (default 4), align, className for width/positioning overrides. |
DropdownMenuItem | inset — left-indent to align with items that have icons. onSelect — called when clicked. disabled. |
DropdownMenuLabel | inset — matches DropdownMenuItem indent. |
DropdownMenuSeparator | Horizontal divider. |
DropdownMenuShortcut | Right-aligned keyboard hint span. |
DropdownMenuCheckboxItem | checked, onCheckedChange. |
DropdownMenuRadioGroup / DropdownMenuRadioItem | value / onValueChange for mutually exclusive choices. |
DropdownMenuSub / DropdownMenuSubTrigger / DropdownMenuSubContent | Nested sub-menu. |