Dropdown Menu
Displays a menu to the user triggered by a button.
Installation
npx baseui-cn add dropdown-menuUsage
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuLabel,
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuSubContent,
DropdownMenuCheckboxItem,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
} from "@/components/ui/dropdown-menu"<DropdownMenu>
<DropdownMenuTrigger>Open</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive">Log out</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Examples
Basic
A standard dropdown menu.
With shortcuts
Show keyboard shortcuts with DropdownMenuShortcut.
Checkboxes
Use DropdownMenuCheckboxItem for toggleable items.
Radio group
Use DropdownMenuRadioGroup for single-select items.
Submenu
Nested menus with DropdownMenuSub.
API
DropdownMenuContent
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "bottom" | "left" | "right" | "bottom" | Side of the trigger the menu appears on |
sideOffset | number | 4 | Distance in px between the menu and the trigger |
align | "start" | "center" | "end" | "start" | Alignment of the popup relative to the trigger |
alignOffset | number | 0 | Offset in px along the alignment axis |
positionerProps forwards native Base UI Positioner options, including anchor, collision boundaries/padding, positioning method and refs. Options supplied there override the convenience positioning props above.
DropdownMenuItem
Items, checkboxes, radio items and submenu triggers share a content slot and a separate trailing indicator slot. Place an icon before the label and DropdownMenuShortcut after it. For multiline text, wrap the label in <span data-slot="menu-item-text"> and optional supporting text in <span data-slot="menu-item-description">. These same slots work in Menubar items. Action names wrap; indicators stay outside the text column.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "default" | Applies destructive red coloring to the item |
inset | boolean | — | Adds left padding so text aligns with icon items |
DropdownMenuLabel / DropdownMenuSubTrigger / DropdownMenuCheckboxItem / DropdownMenuRadioItem
Each of these accepts an inset (boolean) prop that adds left padding to align content with icon-bearing menu items.
API Reference
See the Base UI Menu documentation for the full API reference, including all props, data attributes, and CSS classes.