Dropdown Menu

A menu triggered by a button that displays a list of actions or options. Supports grouping, labels, and separators.

Grouped Menu

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="ghost" size="icon" aria-label="Open menu">
      <MoreHorizontal className="h-4 w-4" />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Log out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

API Reference

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state of the dropdown menu.
`onOpenChange`	`(open: boolean) => void`	—	Callback fired when the open state changes.