Dropdown Menu

A composable dropdown menu built on Base UI's Menu primitive. It supports items, checkbox items, radio items, submenus, labels, separators, and keyboard shortcut hints. The popup is positioned with configurable alignment and side offset.

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Button } from "@/components/ui/button"

export default function DropdownMenuDemo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        Open
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Billing</DropdownMenuItem>
        <DropdownMenuItem>Team</DropdownMenuItem>
        <DropdownMenuItem>Subscription</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Anatomy

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
  DropdownMenuPortal,
} from "@/components/ui/dropdown-menu"

<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Actions</DropdownMenuLabel>
    <DropdownMenuItem>Edit</DropdownMenuItem>
    <DropdownMenuItem>Duplicate</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Examples

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>
    Options
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Log out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

With shortcuts and groups

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>
    Edit
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuGroup>
      <DropdownMenuLabel>Clipboard</DropdownMenuLabel>
      <DropdownMenuItem>
        Cut <DropdownMenuShortcut>Ctrl+X</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        Copy <DropdownMenuShortcut>Ctrl+C</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        Paste <DropdownMenuShortcut>Ctrl+V</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>

With checkbox items

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>
    View
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
    <DropdownMenuCheckboxItem checked={showName} onCheckedChange={setShowName}>
      Name
    </DropdownMenuCheckboxItem>
    <DropdownMenuCheckboxItem checked={showEmail} onCheckedChange={setShowEmail}>
      Email
    </DropdownMenuCheckboxItem>
  </DropdownMenuContent>
</DropdownMenu>

With submenu

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>
    More
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>New File</DropdownMenuItem>
    <DropdownMenuSub>
      <DropdownMenuSubTrigger>Share</DropdownMenuSubTrigger>
      <DropdownMenuSubContent>
        <DropdownMenuItem>Email</DropdownMenuItem>
        <DropdownMenuItem>Slack</DropdownMenuItem>
      </DropdownMenuSubContent>
    </DropdownMenuSub>
  </DropdownMenuContent>
</DropdownMenu>

API Reference

DropdownMenu

The root component that manages open/close state. Wraps Base UI's Menu.Root.

Prop	Type	Default
`open`	`boolean`	—
`onOpenChange`	`(open: boolean) => void`	—
`children`	`ReactNode`	—

DropdownMenuTrigger

The element that toggles the menu. Wraps Base UI's Menu.Trigger.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

DropdownMenuContent

The positioned popup that contains menu items. Handles portal, positioner, and popup internally.

Prop	Type	Default	Description
`align`	`"start" \| "center" \| "end"`	`"start"`	Horizontal alignment relative to the trigger.
`alignOffset`	`number`	`0`	Offset in pixels from the aligned edge.
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Which side of the trigger the menu appears on.
`sideOffset`	`number`	`4`	Gap in pixels between the trigger and the menu.
`className`	`string`	—
`children`	`ReactNode`	—

DropdownMenuItem

A single actionable item in the menu.

Prop	Type	Default	Description
`inset`	`boolean`	—	When `true`, adds left padding to align with items that have icons.
`variant`	`"default" \| "destructive"`	`"default"`	Visual style of the item.
`className`	`string`	—
`children`	`ReactNode`	—

DropdownMenuGroup

Groups related menu items together. Wraps Base UI's Menu.Group.

Prop	Type	Default
`children`	`ReactNode`	—

DropdownMenuLabel

A non-interactive label for a group of items.

Prop	Type	Default	Description
`inset`	`boolean`	—	When `true`, adds left padding to align with inset items.
`className`	`string`	—
`children`	`ReactNode`	—

DropdownMenuCheckboxItem

A menu item with a checkbox indicator.

Prop	Type	Default	Description
`checked`	`boolean`	—	Whether the item is checked.
`onCheckedChange`	`(checked: boolean) => void`	—	Callback when checked state changes.
`inset`	`boolean`	—	When `true`, adds left padding.
`className`	`string`	—
`children`	`ReactNode`	—

DropdownMenuRadioGroup

A group of mutually exclusive radio items. Wraps Base UI's Menu.RadioGroup.

Prop	Type	Default
`value`	`string`	—
`onValueChange`	`(value: string) => void`	—
`children`	`ReactNode`	—

DropdownMenuRadioItem

A radio-style menu item that shows a check indicator when selected.

Prop	Type	Default	Description
`value`	`string`	—	The value associated with this radio item.
`inset`	`boolean`	—	When `true`, adds left padding.
`className`	`string`	—
`children`	`ReactNode`	—

DropdownMenuSeparator

A horizontal rule between menu items. Wraps Base UI's Menu.Separator.

Prop	Type	Default
`className`	`string`	—

DropdownMenuShortcut

A <span> that renders a right-aligned keyboard shortcut hint within a menu item.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

DropdownMenuSub

The root for a submenu. Wraps Base UI's Menu.SubmenuRoot.

Prop	Type	Default
`children`	`ReactNode`	—

DropdownMenuSubTrigger

The item that opens a submenu. Renders a right-pointing chevron automatically.

Prop	Type	Default	Description
`inset`	`boolean`	—	When `true`, adds left padding.
`className`	`string`	—
`children`	`ReactNode`	—

DropdownMenuSubContent

The popup for a submenu. Uses DropdownMenuContent internally with adjusted defaults.

Prop	Type	Default	Description
`align`	`"start" \| "center" \| "end"`	`"start"`	Horizontal alignment relative to the sub-trigger.
`alignOffset`	`number`	`-3`	Offset in pixels from the aligned edge.
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"right"`	Which side of the sub-trigger the submenu appears on.
`sideOffset`	`number`	`0`	Gap in pixels between the sub-trigger and the submenu.
`className`	`string`	—
`children`	`ReactNode`	—

DropdownMenuPortal

Portals menu content to the end of document.body. Wraps Base UI's Menu.Portal.

Prop	Type	Default
`children`	`ReactNode`	—