Dropdown Menu
Displays a menu to the user, triggered by a button.
Installation
npx shadcn@latest add @uqudo/dropdown-menuUsage
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/uqudo/ui/dropdown-menu"<DropdownMenu>
<DropdownMenuTrigger>Open</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuItem variant="destructive">Log out</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Icons placed inside an item are sized automatically. Add a
DropdownMenuShortcut as the last child to right-align a keyboard hint.
Examples
Checkboxes
DropdownMenuCheckboxItem renders a check mark when checked is true.
Radio group
Wrap DropdownMenuRadioItems in a DropdownMenuRadioGroup for a single
selection.
API Reference
DropdownMenuContent
Prop
Type
DropdownMenuItem
Prop
Type
DropdownMenuCheckboxItem
Prop
Type
DropdownMenuRadioItem
Prop
Type
Sub-components
| Component | Renders | Notes |
|---|---|---|
DropdownMenu | DropdownMenu.Root | Accepts open, defaultOpen, onOpenChange, modal. |
DropdownMenuTrigger | DropdownMenu.Trigger | Use asChild to wrap your own button. |
DropdownMenuPortal | DropdownMenu.Portal | Already included in DropdownMenuContent. |
DropdownMenuGroup | DropdownMenu.Group | Groups related items. |
DropdownMenuLabel | DropdownMenu.Label | Muted heading. Supports inset. |
DropdownMenuSeparator | DropdownMenu.Separator | Thin divider between sections. |
DropdownMenuShortcut | <span> | Right-aligned keyboard hint. |
DropdownMenuRadioGroup | DropdownMenu.RadioGroup | Accepts value and onValueChange. |
DropdownMenuSub | DropdownMenu.Sub | Wraps a nested menu. |
DropdownMenuSubTrigger | DropdownMenu.SubTrigger | Appends a chevron. Supports inset. |
DropdownMenuSubContent | DropdownMenu.SubContent | The nested panel. |
Data attributes
Items expose data-slot="dropdown-menu-item", data-variant with the
resolved variant and data-inset when inset is set. Every other part
carries a data-slot named after the component (dropdown-menu-content,
dropdown-menu-label, ...).