Dropdown Menus

Usage and anatomy

DropdownMenu reveals a compact list of actions from a trigger. Use <DropdownMenu.Root /> for state, <DropdownMenu.Trigger /> for the activating control, and compose items inside <DropdownMenu.Content />.

import * as Button from "@acme/ui/button"
import * as DropdownMenu from "@acme/ui/dropdown-menu"

<DropdownMenu.Root>
  <DropdownMenu.Trigger asChild>
    <Button.Root>
      <Button.Label>Open menu</Button.Label>
    </Button.Root>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Group>
      <DropdownMenu.Item>
        <DropdownMenu.ItemLabel>View details</DropdownMenu.ItemLabel>
      </DropdownMenu.Item>
    </DropdownMenu.Group>
  </DropdownMenu.Content>
</DropdownMenu.Root>

Use Item for actions, CheckboxItem for independent options, and RadioItem for one choice within a group.
Use separators and labels to organize longer menus into scannable groups.
Use the destructive variant only for actions with destructive consequences.

Dropdown Menu - Text

Dropdown Menu - With icons

Dropdown Menu - With labels

Dropdown Menu - With shortcuts

Dropdown Menu - With separators

Dropdown Menu - With variants

Dropdown Menu - With radios

Dropdown Menu - With checkboxes

Dropdown Menu - With submenus

API reference

DropdownMenu core props

Prop	Type	Default
Root.open	boolean	—
Root.defaultOpen	boolean	false
Root.onOpenChange	(open: boolean) => void	—
Content.sideOffset	number	4
Item.variant	neutral \| primary \| destructive	neutral
Item.disabled	boolean	false

DropdownMenu also exports Group, Label, Separator, ItemIcon, ItemShortcut, CheckboxItem, RadioGroup, RadioItem, Sub, SubTrigger, and SubContent. Each part accepts the corresponding Radix Dropdown Menu props.