Dropdown Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
Usage
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">Open</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>Examples
Basic
A basic dropdown menu with labels and separators.
Submenu
Use DropdownMenuSub to nest secondary actions.
Shortcuts
Add DropdownMenuShortcut to show keyboard hints.
Icons
Combine icons with labels for quick scanning.
Checkboxes
Use DropdownMenuCheckboxItem for toggles.
Checkboxes Icons
Add icons to checkbox items.
Radio Group
Use DropdownMenuRadioGroup for exclusive choices.
Radio Icons
Show radio options with icons.
Destructive
Use variant="destructive" for irreversible actions.
Avatar
An account switcher dropdown triggered by an avatar.
Complex
A richer example combining groups, icons, and submenus.
API Reference
See the Radix UI documentation for the full API reference.