Dropdown Menu

Displays a menu to the user triggered by a button.

overlayinteractivenavigation

Loading preview...

Installation

npx baseui-cn add dropdown-menu

Usage

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.

Loading preview...

With shortcuts

Show keyboard shortcuts with DropdownMenuShortcut.

Loading preview...

Checkboxes

Use DropdownMenuCheckboxItem for toggleable items.

Loading preview...

Radio group

Use DropdownMenuRadioGroup for single-select items.

Loading preview...

Submenu

Nested menus with DropdownMenuSub.

Loading preview...

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

DropdownMenuItem

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.