# Dropdown Menu

> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

```jsx
<DropdownMenu.Root>

	<DropdownMenu.Trigger>{target => target(Button, {

        "variant": "soft",

        children: <>

			Options

			<DropdownMenu.TriggerIcon />

		</>

      })}</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](/primitives/docs/components/dropdown-menu).

### Root

Contains all the parts of a dropdown menu.

### Trigger

Wraps the control that will open the dropdown menu.

### Trigger Icon

An optional icon part.

### Content

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

| Prop                                                                                                                          | Type                     | Default   |
| ----------------------------------------------------------------------------------------------------------------------------- | ------------------------ | --------- |
| `size`                                                                                                                        | `Responsive<"1" \| "2">` | `"2"`     |
| `variant`The visual variant to apply, see [theme overview](/themes/docs/theme/overview#variants) for more details.            | `"solid" \| "soft"`      | `"solid"` |
| `color`Overrides the accent color inherited from the Theme. See the [color guide](/themes/docs/theme/color) for more details. | `enum`                   | —         |
| `highContrast`Uses a higher contrast color for the component.                                                                 | `boolean`                | —         |

### 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 |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render one explicit target with merged props and behavior, not a cloned child. Read our [Composition](/primitives/docs/guides/composition) guide for details. | `boolean` | —       |
| `color`Overrides the accent color inherited from the Theme. See the [color guide](/themes/docs/theme/color) for more details.                                          | `enum`    | —       |
| `shortcut`Optional shortcut command displayed next to the item text.                                                                                                   | `string`  | —       |

### Group

Used to group multiple `Item` parts.

### RadioGroup

Used to group multiple `RadioItem` parts.

### RadioItem

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

| Prop                                                                                                                          | Type   | Default |
| ----------------------------------------------------------------------------------------------------------------------------- | ------ | ------- |
| `color`Overrides the accent color inherited from the Theme. See the [color guide](/themes/docs/theme/color) for more details. | `enum` | —       |

### CheckboxItem

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

| Prop                                                                                                                          | Type     | Default |
| ----------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
| `color`Overrides the accent color inherited from the Theme. See the [color guide](/themes/docs/theme/color) for more details. | `enum`   | —       |
| `shortcut`Optional shortcut command displayed next to the item text.                                                          | `string` | —       |

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

```jsx
<Flex gap="3" align="center">

	<DropdownMenu.Root>

		<DropdownMenu.Trigger>{target => target(Button, {

          "variant": "soft",

          "size": "1",

          children: <>

				Options

				<DropdownMenu.TriggerIcon />

			</>

        })}</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>



	<DropdownMenu.Root>

		<DropdownMenu.Trigger>{target => target(Button, {

          "variant": "soft",

          "size": "2",

          children: <>

				Options

				<DropdownMenu.TriggerIcon />

			</>

        })}</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>

</Flex>
```

### Variant

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

```jsx
<Flex gap="3" align="center">

	<DropdownMenu.Root>

		<DropdownMenu.Trigger>{target => target(Button, {

          "variant": "solid",

          children: <>

				Options

				<DropdownMenu.TriggerIcon />

			</>

        })}</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>{target => target(Button, {

          "variant": "soft",

          children: <>

				Options

				<DropdownMenu.TriggerIcon />

			</>

        })}</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](/themes/docs/theme/color). You can also pass `color` to a specific item to override for semantic reasons (ie. destruction action).

```jsx
<Flex gap="3">

	<DropdownMenu.Root>

		<DropdownMenu.Trigger>{target => target(Button, {

          "variant": "soft",

          "color": "indigo",

          children: <>

				Options

				<DropdownMenu.TriggerIcon />

			</>

        })}</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>{target => target(Button, {

          "variant": "soft",

          "color": "cyan",

          children: <>

				Options

				<DropdownMenu.TriggerIcon />

			</>

        })}</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>{target => target(Button, {

          "variant": "soft",

          "color": "orange",

          children: <>

				Options

				<DropdownMenu.TriggerIcon />

			</>

        })}</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>{target => target(Button, {

          "variant": "soft",

          "color": "crimson",

          children: <>

				Options

				<DropdownMenu.TriggerIcon />

			</>

        })}</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.

```jsx
<Grid columns="2" gap="3" display="inline-grid">

	<DropdownMenu.Root>

		<DropdownMenu.Trigger>{target => target(Button, {

          "color": "gray",

          children: <>

				Options

				<DropdownMenu.TriggerIcon />

			</>

        })}</DropdownMenu.Trigger>

		<DropdownMenu.Content color="gray">

			<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>{target => target(Button, {

          "color": "gray",

          "highContrast": true,

          children: <>

				Options

				<DropdownMenu.TriggerIcon />

			</>

        })}</DropdownMenu.Trigger>

		<DropdownMenu.Content color="gray" 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>{target => target(Button, {

          "color": "gray",

          "variant": "soft",

          children: <>

				Options

				<DropdownMenu.TriggerIcon />

			</>

        })}</DropdownMenu.Trigger>

		<DropdownMenu.Content color="gray" 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>{target => target(Button, {

          "color": "gray",

          "variant": "soft",

          "highContrast": true,

          children: <>

				Options

				<DropdownMenu.TriggerIcon />

			</>

        })}</DropdownMenu.Trigger>

		<DropdownMenu.Content color="gray" 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>
```