 <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>

DropdownMenu.Content

`color`

rubygraygoldbronzebrownyellowamberorangetomatoredcrimsonpinkplumpurplevioletirisindigobluecyantealjadegreengrasslimemintsky

`container`

Element | DocumentFragment | null

`highContrast`

boolean

`size`

`variant`

solidsoft

DropdownMenu.Item

`asChild`

boolean

`color`

rubygraygoldbronzebrownyellowamberorangetomatoredcrimsonpinkplumpurplevioletirisindigobluecyantealjadegreengrasslimemintsky

`shortcut`

string

DropdownMenu.RadioItem

`color`

rubygraygoldbronzebrownyellowamberorangetomatoredcrimsonpinkplumpurplevioletirisindigobluecyantealjadegreengrasslimemintsky

DropdownMenu.CheckboxItem

`color`

rubygraygoldbronzebrownyellowamberorangetomatoredcrimsonpinkplumpurplevioletirisindigobluecyantealjadegreengrasslimemintsky

`shortcut`

string

DropdownMenu.SubContent

`container`

Element | DocumentFragment | null

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>

Dashboard

4 variants found

DropdownMenu in Indexdashboard

DropdownMenu in Organization Membership Headerdashboard

Destructive dropdownmenu in Organization Membershipsdashboard

color=red

Destructive dropdownmenu in Organization Membershipsdashboard

color=red

Context

DropdownMenu.Content

Prop	Type	Default	Required
`color`	`"ruby" \| "gray" \| "gold" \| "bronze" \| "brown" \| "yellow" \| "amber" \| "orange" \| "tomato" \| "red" \| "crimson" \| "pink" \| "plum" \| "purple" \| "violet" \| "iris" \| "indigo" \| "blue" \| ... 8 more ...`	—	no
`container`	`Element \| DocumentFragment \| null`	—	no
`highContrast`	`boolean`	—	no
`size`	`Responsive<"1" \| "2">`	—	no
`variant`	`"solid" \| "soft"`	—	no

DropdownMenu.Item

Prop	Type	Default	Required
`asChild`	`boolean`	—	no
`color`	`"ruby" \| "gray" \| "gold" \| "bronze" \| "brown" \| "yellow" \| "amber" \| "orange" \| "tomato" \| "red" \| "crimson" \| "pink" \| "plum" \| "purple" \| "violet" \| "iris" \| "indigo" \| "blue" \| ... 8 more ...`	—	no
`shortcut`	`string`	—	no

DropdownMenu.RadioItem

Prop	Type	Default	Required
`color`	`"ruby" \| "gray" \| "gold" \| "bronze" \| "brown" \| "yellow" \| "amber" \| "orange" \| "tomato" \| "red" \| "crimson" \| "pink" \| "plum" \| "purple" \| "violet" \| "iris" \| "indigo" \| "blue" \| ... 8 more ...`	—	no

DropdownMenu.CheckboxItem

Prop	Type	Default	Required
`color`	`"ruby" \| "gray" \| "gold" \| "bronze" \| "brown" \| "yellow" \| "amber" \| "orange" \| "tomato" \| "red" \| "crimson" \| "pink" \| "plum" \| "purple" \| "violet" \| "iris" \| "indigo" \| "blue" \| ... 8 more ...`	—	no
`shortcut`	`string`	—	no

DropdownMenu.SubContent

Prop	Type	Default	Required
`container`	`Element \| DocumentFragment \| null`	—	no

Usage

Used 194 times across 2 packages

Dashboard

185

Admin Portal

Variant Distribution

align

end

100%

side

top

100%

color

red

100%

Where it's used

34 files

packages/dashboard/src/components/stateful-table/cells/dropdown-menu-cell.spec.tsx12

packages/dashboard/src/legacy-pages/[environmentId]/radar/index.tsx12

packages/dashboard/src/components/users/organization-memberships.tsx10

packages/dashboard/src/components/organizations/organization/members-table.tsx9

packages/dashboard/src/components/roles/roles-section.tsx8

packages/dashboard/src/components/user-dropdown/user-dropdown.tsx8

packages/dashboard/src/components/settings/team-settings/member-dropdown/member-dropdown.tsx7

packages/dashboard/src/components/audit-logs/audit-logs-page.tsx6

packages/dashboard/src/components/connections/connection-group-role-assignment/connection-group-role-assignment-card.tsx6

packages/dashboard/src/components/roles/organization-roles-section.tsx6

Show 24 more files

Dropdown Menu

On this page

DropdownMenu.Content

`color`

`container`

`highContrast`

`size`

`variant`

DropdownMenu.Item

`asChild`

`color`

`shortcut`

DropdownMenu.RadioItem

`color`

DropdownMenu.CheckboxItem

`color`

`shortcut`

DropdownMenu.SubContent

`container`

Dashboard

Context

Full API Reference

DropdownMenu.Content

DropdownMenu.Item

DropdownMenu.RadioItem

DropdownMenu.CheckboxItem

DropdownMenu.SubContent

Usage Statistics

Usage

Variant Distribution

Where it's used

Dropdown Menu

Props

DropdownMenu.Content

color

container

highContrast

size

variant

DropdownMenu.Item

asChild

color

shortcut

DropdownMenu.RadioItem

color

DropdownMenu.CheckboxItem

color

shortcut

DropdownMenu.SubContent

container

Usage

With icons

With labels and groups

Spacing and alignment

With disabled items

Variants

Dashboard

Context

Full API Reference

Full API Reference

DropdownMenu.Content

DropdownMenu.Item

DropdownMenu.RadioItem

DropdownMenu.CheckboxItem

DropdownMenu.SubContent

Usage Statistics

Usage Statistics

Usage

Variant Distribution

Where it's used

`color`

`container`

`highContrast`

`size`

`variant`

`asChild`

`color`

`shortcut`

`color`

`color`

`shortcut`

`container`