 <DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <Button color="purple">
      Actions
      <DropdownMenu.TriggerIcon />
    </Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>Edit connection settings</DropdownMenu.Item>
    <DropdownMenu.Item color="red">Delete connection</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

This component inherits parts and props from the Radix Dropdown Menu component. View source

Contains all the parts of a dropdown menu.

Wraps the Button or Icon Button that toggles the dropdown menu. Supports common margin props.

Optionally renders ChevronDownIcon in the trigger.

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

Prop	Type	Default
`align`	`"start" \| "end"`	`"start"`
`sideOffset`	`number`	`5`
`alignOffset`	`number`	`0`

The component that contains the dropdown menu items.

Prop	Type	Default
`color`	`"gray" \| "red"`	`"gray"`

Used in conjunction with DropdownMenu.Label to group multiple items.

Used to render the label of a group (not focusable using arrow keys).

Used to visually separate items in the dropdown menu.

Should only be used for immediate actions (e.g. editing or deleting an entity, navigating to a different page, exporting data)
Should not maintain a selected state (see Select)
Destructive actions should be red

You can add icons to dropdown menu items to make actions more recognizable.

 <DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <Button color="purple">
      Actions
      <DropdownMenu.TriggerIcon />
    </Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>
      <Flex align="center" gap="2">
        <DownloadIcon />
        Download JSON schema
      </Flex>
    </DropdownMenu.Item>
    <DropdownMenu.Item>
      <Flex align="center" gap="2">
        <ReloadIcon />
        Restore version 3 as current
      </Flex>
    </DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item color="red">
      <Flex align="center" gap="2">
        <TrashIcon />
        Delete event
      </Flex>
    </DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

Use groups and labels to organize related actions.

 <DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <Button color="purple">
      Actions
      <DropdownMenu.TriggerIcon />
    </Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Group>
      <DropdownMenu.Label>Export</DropdownMenu.Label>
      <DropdownMenu.Item>Download PDF</DropdownMenu.Item>
      <DropdownMenu.Item>Download CSV</DropdownMenu.Item>
      <DropdownMenu.Item>Export to email</DropdownMenu.Item>
    </DropdownMenu.Group>
    <DropdownMenu.Separator />
    <DropdownMenu.Group>
      <DropdownMenu.Label>Manage</DropdownMenu.Label>
      <DropdownMenu.Item>Duplicate item</DropdownMenu.Item>
      <DropdownMenu.Item>Archive item</DropdownMenu.Item>
      <DropdownMenu.Item color="red">Delete item</DropdownMenu.Item>
    </DropdownMenu.Group>
  </DropdownMenu.Content>
</DropdownMenu.Root>

If using Icon Button as a trigger, sideOffset and alignOffset will likely need to be set to account for extra ghost button padding. Here are some common examples:

 <Flex gap="4" align="center">
  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <IconButton size="1">
        <DotsHorizontalIcon />
      </IconButton>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content sideOffset={9} align="end" alignOffset={-3}>
      <DropdownMenu.Item>Edit connection settings</DropdownMenu.Item>
      <DropdownMenu.Item color="red">Delete connection</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>

  <DropdownMenu.Root>
    <DropdownMenu.Trigger>
      <IconButton size="1">
        <DotsHorizontalIcon />
      </IconButton>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content sideOffset={9} alignOffset={-3}>
      <DropdownMenu.Item>Edit connection settings</DropdownMenu.Item>
      <DropdownMenu.Item color="red">Delete connection</DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Root>
</Flex>

Use the disabled prop to disable actions that are not currently available.

 <DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <Button color="purple">
      Actions
      <DropdownMenu.TriggerIcon />
    </Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>Edit role</DropdownMenu.Item>
    <DropdownMenu.Item disabled>Set as default</DropdownMenu.Item>
    <DropdownMenu.Item disabled color="red">
      Delete role
    </DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

Dropdown Menu

API Reference

Root

Trigger

Trigger Icon

Content

Item

Group

Label

Separator

Usage Guidelines

Examples

With icons

With labels and groups

Spacing and alignment

With disabled items