Dropdown Menu

Menu representing a set of actions, triggered by a button.

View source Report an issue View in Playground

<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <Button variant="soft">
      Options
      <CaretDownIcon />
    </Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
    <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>

    <DropdownMenu.Sub>
      <DropdownMenu.SubTrigger>More</DropdownMenu.SubTrigger>
      <DropdownMenu.SubContent>
        <DropdownMenu.Item>Move to project…</DropdownMenu.Item>
        <DropdownMenu.Item>Move to folder…</DropdownMenu.Item>

        <DropdownMenu.Separator />
        <DropdownMenu.Item>Advanced options…</DropdownMenu.Item>
      </DropdownMenu.SubContent>
    </DropdownMenu.Sub>

    <DropdownMenu.Separator />
    <DropdownMenu.Item>Share</DropdownMenu.Item>
    <DropdownMenu.Item>Add to favorites</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item shortcut="⌘ ⌫" color="red">
      Delete
    </DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

API Reference

This component inherits props from the Dropdown Menu primitive.

Root

Contains all the parts of a dropdown menu.

Trigger

Wraps the control that will open the dropdown menu.

Content

The component that pops out when the dropdown menu is open.

Prop	Type	Default
`size`	`Responsive<"1" \| "2">`	`"2"`
`variant`	`"solid" \| "soft"`	`"solid"`
`color`	`enum`	No default value
`highContrast`	`boolean`	No default value

Label

Used to render a label. It won't be focusable using arrow keys.

Item

The component that contains the dropdown menu items.

Prop	Type	Default
`color`	`enum`	No default value
`shortcut`	`string`	No default value

Group

Used to group multiple DropdownMenu.Items.

RadioGroup

Used to group multiple DropdownMenu.RadioItems.

RadioItem

An item that can be controlled and rendered like a radio.

CheckboxItem

An item that can be controlled and rendered like a checkbox.

Sub

Contains all the parts of a submenu.

SubTrigger

An item that opens a submenu. Must be rendered inside DropdownMenu.Sub.

SubContent

The component that pops out when a submenu is open. Must be rendered inside DropdownMenu.Sub.

Examples

Size

Use the size prop to control the size.

<Flex gap="3" align="center">
  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button variant="soft" size="2">
        Options
        <CaretDownIcon width="16" height="16" />
      </Button>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content size="2">
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>

      <DropdownMenu.Separator />
      <DropdownMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>

  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button variant="soft" size="1">
        Options
        <CaretDownIcon width="12" height="12" />
      </Button>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content size="1">
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>

      <DropdownMenu.Separator />
      <DropdownMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>
</Flex>

Variant

Use the variant prop to customize the visual style of the dropdown menu.

<Flex gap="3" align="center">
  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button variant="solid">
        Options
        <CaretDownIcon width="12" height="12" />
      </Button>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content variant="solid">
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>

      <DropdownMenu.Separator />
      <DropdownMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>

  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button variant="soft">
        Options
        <CaretDownIcon width="12" height="12" />
      </Button>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content variant="soft">
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>

      <DropdownMenu.Separator />
      <DropdownMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>
</Flex>

Color

Use the color prop to assign a specific color, ignoring the global theme. You can also pass color to a specific item to override for semantic reasons (ie. destruction action).

<Flex gap="3">
  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button variant="soft" color="indigo">
        Options
        <CaretDownIcon width="12" height="12" />
      </Button>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content variant="soft" color="indigo">
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>

  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button variant="soft" color="cyan">
        Options
        <CaretDownIcon width="12" height="12" />
      </Button>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content variant="soft" color="cyan">
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>

  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button variant="soft" color="orange">
        Options
        <CaretDownIcon width="12" height="12" />
      </Button>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content variant="soft" color="orange">
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>

  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button variant="soft" color="crimson">
        Options
        <CaretDownIcon width="12" height="12" />
      </Button>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content variant="soft" color="crimson">
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>
</Flex>

High-contrast

Use the highContrast prop to increase color contrast with the background.

<Grid columns="2" gap="3" display="inline-grid">
  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button variant="solid">
        Options
        <CaretDownIcon width="12" height="12" />
      </Button>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content variant="solid">
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>

  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button variant="solid" highContrast>
        Options
        <CaretDownIcon width="12" height="12" />
      </Button>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content variant="solid" highContrast>
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>

  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button variant="soft">
        Options
        <CaretDownIcon width="12" height="12" />
      </Button>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content variant="soft">
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>

  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <Button variant="soft" highContrast>
        Options
        <CaretDownIcon width="12" height="12" />
      </Button>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content variant="soft" highContrast>
      <DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
      <DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
      <DropdownMenu.Separator />
      <DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>
</Grid>

PreviousDialog

NextHover Card

Edit this page on GitHub.

Overview

Theme

Layout

Typography

Components

Utilities

Dropdown Menu