Dropdown Menu

Actions

A menu of commands and options anchored to a button.

A dropdown menu surfaces related commands from a trigger. It supports labels, separators, keyboard shortcuts, and checked or radio items, all with full keyboard navigation from the Base UI Menu primitive.

npx shadcn@latest add dropdown-menu

Basic

Items with icons and shortcuts, separated by sections.

Preview

Live

tsx

1<DropdownMenu>
2  <DropdownMenuTrigger render={<Button variant="outline">Account</Button>} />
3  <DropdownMenuContent className="w-56">
4    <DropdownMenuLabel>My Account</DropdownMenuLabel>
5    <DropdownMenuSeparator />
6    <DropdownMenuItem>
7      <User />
8      Profile
9      <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
10    </DropdownMenuItem>
11    <DropdownMenuItem>
12      <Settings />
13      Settings
14      <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
15    </DropdownMenuItem>
16    <DropdownMenuSeparator />
17    <DropdownMenuItem>
18      <LogOut />
19      Log out
20    </DropdownMenuItem>
21  </DropdownMenuContent>
22</DropdownMenu>

Checkboxes & radio items

Checkbox items toggle on and off; radio items pick one value in a group.

Preview

Live

tsx

1<DropdownMenu>
2  <DropdownMenuTrigger render={<Button variant="outline">View options</Button>} />
3  <DropdownMenuContent className="w-56">
4    <DropdownMenuCheckboxItem defaultChecked>Show grid</DropdownMenuCheckboxItem>
5    <DropdownMenuCheckboxItem>Show side panel</DropdownMenuCheckboxItem>
6    <DropdownMenuCheckboxItem disabled>Show overlays</DropdownMenuCheckboxItem>
7    <DropdownMenuSeparator />
8    <DropdownMenuRadioGroup defaultValue="compact">
9      <DropdownMenuLabel>Density</DropdownMenuLabel>
10      <DropdownMenuRadioItem value="comfortable">Comfortable</DropdownMenuRadioItem>
11      <DropdownMenuRadioItem value="compact">Compact</DropdownMenuRadioItem>
12    </DropdownMenuRadioGroup>
13  </DropdownMenuContent>
14</DropdownMenu>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
sideOffset	number= 4	Distance in pixels between the trigger and the popup.
checked	boolean	Controlled checked state for DropdownMenuCheckboxItem.
defaultChecked	boolean= false	Uncontrolled checked state for DropdownMenuCheckboxItem.
value	string	The value a DropdownMenuRadioItem represents inside its RadioGroup.
render	React.ElementType	Renders the trigger as a different element or component.