Dropdown Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

Customize the dropdown menu's behavior and appearance with these configuration options. The DropdownMenu component is composed of several parts, each with their own props

DropdownMenu.Trigger

The button that opens the dropdown menu.

Prop	Type	Default
`asChild`	`boolean`	-

DropdownMenu.Content

The container that holds the dropdown menu items.

Prop	Type	Default
`align`	`"start" \| "center" \| "end"`	-
`sideOffset`	`number`	`4`
`className`	`string`	-

DropdownMenu.Item

Individual clickable options within the dropdown menu.

Prop	Type	Default
`leadingIcon`	`ReactNode`	-
`trailingIcon`	`ReactNode`	-
`disabled`	`boolean`	-
`className`	`string`	-

DropdownMenu.Group

A way to group related menu items together.

Prop	Type	Default
`className`	`string`	-

DropdownMenu.Label

Text labels to describe groups of menu items.

Prop	Type	Default
`className`	`string`	-

DropdownMenu.Separator

Visual divider between menu items or groups.

Prop	Type	Default
`className`	`string`	-

DropdownMenu.EmptyState

Placeholder content when there are no menu items to display.

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

Examples

Basic Usage

A simple dropdown menu with basic functionality.

<DropdownMenu>
  <DropdownMenu.Trigger asChild>
    <Button color="neutral">Open Menu</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>Profile</DropdownMenu.Item>
    <DropdownMenu.Item>Settings</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item>Logout</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>

With Icons

You can add icons to the dropdown items. Supports both leading and trailing icons.

<DropdownMenu>
  <DropdownMenu.Trigger asChild>
    <Button color="neutral">Actions</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item leadingIcon={<>📝</>}>Edit</DropdownMenu.Item>
    <DropdownMenu.Item leadingIcon={<>📋</>} trailingIcon={<>⌘C</>}>
      Copy
    </DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item leadingIcon={<>🗑️</>}>Delete</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>

With Groups and Labels

Organize related menu items into sections with descriptive headers.

<DropdownMenu>
  <DropdownMenu.Trigger asChild>
    <Button color="neutral">More</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Label>Actions</DropdownMenu.Label>
    <DropdownMenu.Group>
      <DropdownMenu.Item>New File</DropdownMenu.Item>
      <DropdownMenu.Item>New Folder</DropdownMenu.Item>
    </DropdownMenu.Group>
    <DropdownMenu.Separator />
    <DropdownMenu.Label>Sort By</DropdownMenu.Label>
    <DropdownMenu.Group>
      <DropdownMenu.Item>Name</DropdownMenu.Item>
      <DropdownMenu.Item>Date</DropdownMenu.Item>
    </DropdownMenu.Group>
  </DropdownMenu.Content>
</DropdownMenu>

Dropdown Menu

On this page