Dropdown menu
Menus of actions and options triggered from a button.
Default
A basic menu of actions with a separator.
Menu item with action
Items with keyboard shortcuts and destructive styling.
Checkbox items
Toggleable menu items that persist their checked state.
User profile
An account menu headed by the user's profile details.
API reference
A menu opened from a button: a portalled popup of groups, labels, items, checkbox/radio items, separators, shortcuts, and submenus.
Full props on Base UI MenuAnatomy
DropdownMenu | Root managing the menu's open state. |
DropdownMenuPortal | Renders the menu outside the DOM tree. |
DropdownMenuTrigger | Button that opens the menu. |
DropdownMenuContent | Portalled, positioned popup container for items. |
DropdownMenuGroup | Wraps related items. Required around a Label. |
DropdownMenuLabel | Muted heading for a group. Must be inside a Group. |
DropdownMenuItem | A selectable menu row. |
DropdownMenuCheckboxItem | A menu item with a check indicator. |
DropdownMenuRadioGroup | Coordinates selection among radio items. |
DropdownMenuRadioItem | A radio menu row with a check indicator. |
DropdownMenuSeparator | Thin divider between menu sections. |
DropdownMenuShortcut | Right-aligned text showing a keyboard shortcut. |
DropdownMenuSub | Root for a nested submenu. |
DropdownMenuSubTrigger | A menu item that opens a submenu; shows a chevron. |
DropdownMenuSubContent | Portalled popup for a submenu. |