<.dropdown_menu_root id="docs-dropdown-menu-hero">
<.dropdown_menu_trigger>
<.button variant="soft">Options<.dropdown_menu_trigger_icon /></.button>
</.dropdown_menu_trigger>
<.dropdown_menu_content>
<.dropdown_menu_item shortcut="⌘ E">Edit</.dropdown_menu_item>
<.dropdown_menu_item shortcut="⌘ D">Duplicate</.dropdown_menu_item>
<.dropdown_menu_separator />
<.dropdown_menu_item shortcut="⌘ N">Archive</.dropdown_menu_item>
<.dropdown_menu_separator />
<.dropdown_menu_item>Share</.dropdown_menu_item>
<.dropdown_menu_item>Add to favorites</.dropdown_menu_item>
<.dropdown_menu_separator />
<.dropdown_menu_item shortcut="⌘ ⌫" color="red">Delete</.dropdown_menu_item>
</.dropdown_menu_content>
</.dropdown_menu_root>API Reference
This component inherits props from the Dropdown Menu primitive. Content portals into container (default "body").
Root
Contains all the parts of a dropdown menu.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
|
default_open
|
boolean
|
false
|
|
dir
|
string
|
"ltr"
|
|
id
|
string
|
nil
|
|
modal
|
boolean
|
true
|
|
on_open_change
|
string
|
nil
|
|
open
|
boolean
|
false
|
|
style
|
string
|
""
|
class
Type
string
Default
nil
default_open
Type
boolean
Default
false
dir
Type
string
Default
"ltr"
id
Type
string
Default
nil
modal
Type
boolean
Default
true
on_open_change
Type
string
Default
nil
open
Type
boolean
Default
false
style
Type
string
Default
""
Trigger
Wraps the control that will open the dropdown menu.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
|
content_id
|
string
|
nil
|
|
disabled
|
boolean
|
false
|
|
id
|
string
|
nil
|
|
style
|
string
|
""
|
class
Type
string
Default
nil
content_id
Type
string
Default
nil
disabled
Type
boolean
Default
false
id
Type
string
Default
nil
style
Type
string
Default
""
Trigger Icon
An optional icon part for the trigger.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
class
Type
string
Default
nil
Content
The component that pops out when the dropdown menu is open.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
|
color
|
string
|
—
|
Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky. |
container
|
string
|
"body"
|
|
high_contrast
|
boolean
|
—
|
Whether to increase color contrast with the background. |
id
|
string
|
nil
|
|
size
|
string
|
"2"
|
|
variant
|
string
|
"solid"
|
class
Type
string
Default
nil
color
Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
Type
string
Default
—
container
Type
string
Default
"body"
high_contrast
Whether to increase color contrast with the background.
Type
boolean
Default
—
id
Type
string
Default
nil
size
Type
string
Default
"2"
variant
Type
string
Default
"solid"
Label
Used to render a label. It won't be focusable using arrow keys.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
class
Type
string
Default
nil
Item
The component that contains the dropdown menu items.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
|
color
|
string
|
—
|
Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky. |
disabled
|
boolean
|
false
|
|
shortcut
|
string
|
nil
|
|
text_value
|
string
|
nil
|
class
Type
string
Default
nil
color
Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
Type
string
Default
—
disabled
Type
boolean
Default
false
shortcut
Type
string
Default
nil
text_value
Type
string
Default
nil
Separator
Visual separator between items.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
class
Type
string
Default
nil
CheckboxItem
An item that can be controlled and rendered like a checkbox.
| Prop | Type | Default | Description |
|---|---|---|---|
checked
|
boolean
|
false
|
|
class
|
string
|
nil
|
|
color
|
string
|
—
|
Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky. |
disabled
|
boolean
|
false
|
|
shortcut
|
string
|
nil
|
|
text_value
|
string
|
nil
|
checked
Type
boolean
Default
false
class
Type
string
Default
nil
color
Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
Type
string
Default
—
disabled
Type
boolean
Default
false
shortcut
Type
string
Default
nil
text_value
Type
string
Default
nil
RadioItem
An item that can be controlled and rendered like a radio.
| Prop | Type | Default | Description |
|---|---|---|---|
checked
|
boolean
|
false
|
|
class
|
string
|
nil
|
|
color
|
string
|
—
|
Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky. |
disabled
|
boolean
|
false
|
|
shortcut
|
string
|
nil
|
|
text_value
|
string
|
nil
|
|
value
|
string
|
""
|
checked
Type
boolean
Default
false
class
Type
string
Default
nil
color
Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
Type
string
Default
—
disabled
Type
boolean
Default
false
shortcut
Type
string
Default
nil
text_value
Type
string
Default
nil
value
Type
string
Default
""
Sub
Contains all the parts of a submenu.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
|
open
|
boolean
|
false
|
class
Type
string
Default
nil
open
Type
boolean
Default
false
SubTrigger
An item that opens a submenu. Must be rendered inside dropdown_menu_sub.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
|
disabled
|
boolean
|
false
|
|
text_value
|
string
|
nil
|
class
Type
string
Default
nil
disabled
Type
boolean
Default
false
text_value
Type
string
Default
nil
SubContent
The component that pops out when a submenu is open. Must be rendered inside dropdown_menu_sub.
| Prop | Type | Default | Description |
|---|---|---|---|
align
|
string
|
"start"
|
|
class
|
string
|
nil
|
|
color
|
string
|
—
|
Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky. |
high_contrast
|
boolean
|
—
|
Whether to increase color contrast with the background. |
id
|
string
|
nil
|
|
side
|
string
|
"right"
|
|
side_offset
|
integer
|
1
|
|
size
|
string
|
"2"
|
|
variant
|
string
|
"solid"
|
align
Type
string
Default
"start"
class
Type
string
Default
nil
color
Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
Type
string
Default
—
high_contrast
Whether to increase color contrast with the background.
Type
boolean
Default
—
id
Type
string
Default
nil
side
Type
string
Default
"right"
side_offset
Type
integer
Default
1
size
Type
string
Default
"2"
variant
Type
string
Default
"solid"
Examples
Size
Use the size prop to control the size.
<.flex gap="3" align="center">
<.dropdown_menu_root id="docs-dropdown-menu-size-1">
<.dropdown_menu_trigger>
<.button variant="soft" size="1">Options<.dropdown_menu_trigger_icon /></.button>
</.dropdown_menu_trigger>
<.dropdown_menu_content size="1">
<.dropdown_menu_item shortcut="⌘ E">Edit</.dropdown_menu_item>
<.dropdown_menu_item shortcut="⌘ D">Duplicate</.dropdown_menu_item>
<.dropdown_menu_separator />
<.dropdown_menu_item shortcut="⌘ N">Archive</.dropdown_menu_item>
<.dropdown_menu_separator />
<.dropdown_menu_item shortcut="⌘ ⌫" color="red">Delete</.dropdown_menu_item>
</.dropdown_menu_content>
</.dropdown_menu_root>
<.dropdown_menu_root id="docs-dropdown-menu-size-2">
<.dropdown_menu_trigger>
<.button variant="soft" size="2">Options<.dropdown_menu_trigger_icon /></.button>
</.dropdown_menu_trigger>
<.dropdown_menu_content size="2">
<.dropdown_menu_item shortcut="⌘ E">Edit</.dropdown_menu_item>
<.dropdown_menu_item shortcut="⌘ D">Duplicate</.dropdown_menu_item>
<.dropdown_menu_separator />
<.dropdown_menu_item shortcut="⌘ N">Archive</.dropdown_menu_item>
<.dropdown_menu_separator />
<.dropdown_menu_item shortcut="⌘ ⌫" color="red">Delete</.dropdown_menu_item>
</.dropdown_menu_content>
</.dropdown_menu_root>
</.flex>Variant
Use the variant prop to customize the visual style of the dropdown menu.
<.flex gap="3" align="center">
<.dropdown_menu_root id="docs-dropdown-menu-variant-solid">
<.dropdown_menu_trigger>
<.button variant="solid">Options<.dropdown_menu_trigger_icon /></.button>
</.dropdown_menu_trigger>
<.dropdown_menu_content variant="solid">
<.dropdown_menu_item shortcut="⌘ E">Edit</.dropdown_menu_item>
<.dropdown_menu_item shortcut="⌘ D">Duplicate</.dropdown_menu_item>
<.dropdown_menu_separator />
<.dropdown_menu_item shortcut="⌘ N">Archive</.dropdown_menu_item>
<.dropdown_menu_separator />
<.dropdown_menu_item shortcut="⌘ ⌫" color="red">Delete</.dropdown_menu_item>
</.dropdown_menu_content>
</.dropdown_menu_root>
<.dropdown_menu_root id="docs-dropdown-menu-variant-soft">
<.dropdown_menu_trigger>
<.button variant="soft">Options<.dropdown_menu_trigger_icon /></.button>
</.dropdown_menu_trigger>
<.dropdown_menu_content variant="soft">
<.dropdown_menu_item shortcut="⌘ E">Edit</.dropdown_menu_item>
<.dropdown_menu_item shortcut="⌘ D">Duplicate</.dropdown_menu_item>
<.dropdown_menu_separator />
<.dropdown_menu_item shortcut="⌘ N">Archive</.dropdown_menu_item>
<.dropdown_menu_separator />
<.dropdown_menu_item shortcut="⌘ ⌫" color="red">Delete</.dropdown_menu_item>
</.dropdown_menu_content>
</.dropdown_menu_root>
</.flex>Color
Use the color prop to assign a specific color. You can also pass color to a specific item for semantic emphasis.
<.flex gap="3" wrap="wrap">
<.dropdown_menu_root id="docs-dropdown-menu-color-indigo">
<.dropdown_menu_trigger>
<.button variant="soft" color="indigo">Options<.dropdown_menu_trigger_icon /></.button>
</.dropdown_menu_trigger>
<.dropdown_menu_content variant="soft" color="indigo">
<.dropdown_menu_item shortcut="⌘ E">Edit</.dropdown_menu_item>
<.dropdown_menu_item shortcut="⌘ D">Duplicate</.dropdown_menu_item>
<.dropdown_menu_separator />
<.dropdown_menu_item shortcut="⌘ N">Archive</.dropdown_menu_item>
</.dropdown_menu_content>
</.dropdown_menu_root>
<.dropdown_menu_root id="docs-dropdown-menu-color-cyan">
<.dropdown_menu_trigger>
<.button variant="soft" color="cyan">Options<.dropdown_menu_trigger_icon /></.button>
</.dropdown_menu_trigger>
<.dropdown_menu_content variant="soft" color="cyan">
<.dropdown_menu_item shortcut="⌘ E">Edit</.dropdown_menu_item>
<.dropdown_menu_item shortcut="⌘ D">Duplicate</.dropdown_menu_item>
<.dropdown_menu_separator />
<.dropdown_menu_item shortcut="⌘ N">Archive</.dropdown_menu_item>
</.dropdown_menu_content>
</.dropdown_menu_root>
<.dropdown_menu_root id="docs-dropdown-menu-color-orange">
<.dropdown_menu_trigger>
<.button variant="soft" color="orange">Options<.dropdown_menu_trigger_icon /></.button>
</.dropdown_menu_trigger>
<.dropdown_menu_content variant="soft" color="orange">
<.dropdown_menu_item shortcut="⌘ E">Edit</.dropdown_menu_item>
<.dropdown_menu_item shortcut="⌘ D">Duplicate</.dropdown_menu_item>
<.dropdown_menu_separator />
<.dropdown_menu_item shortcut="⌘ N">Archive</.dropdown_menu_item>
</.dropdown_menu_content>
</.dropdown_menu_root>
<.dropdown_menu_root id="docs-dropdown-menu-color-crimson">
<.dropdown_menu_trigger>
<.button variant="soft" color="crimson">Options<.dropdown_menu_trigger_icon /></.button>
</.dropdown_menu_trigger>
<.dropdown_menu_content variant="soft" color="crimson">
<.dropdown_menu_item shortcut="⌘ E">Edit</.dropdown_menu_item>
<.dropdown_menu_item shortcut="⌘ D">Duplicate</.dropdown_menu_item>
<.dropdown_menu_separator />
<.dropdown_menu_item shortcut="⌘ N">Archive</.dropdown_menu_item>
</.dropdown_menu_content>
</.dropdown_menu_root>
</.flex>High-contrast
Use the high_contrast prop to increase color contrast with the background.
<.grid columns="2" gap="3">
<.dropdown_menu_root id="docs-dropdown-menu-hc-solid-off">
<.dropdown_menu_trigger>
<.button color="gray">Options<.dropdown_menu_trigger_icon /></.button>
</.dropdown_menu_trigger>
<.dropdown_menu_content color="gray">
<.dropdown_menu_item shortcut="⌘ E">Edit</.dropdown_menu_item>
<.dropdown_menu_item shortcut="⌘ D">Duplicate</.dropdown_menu_item>
<.dropdown_menu_separator />
<.dropdown_menu_item shortcut="⌘ N">Archive</.dropdown_menu_item>
</.dropdown_menu_content>
</.dropdown_menu_root>
<.dropdown_menu_root id="docs-dropdown-menu-hc-solid-on">
<.dropdown_menu_trigger>
<.button color="gray" high_contrast>Options<.dropdown_menu_trigger_icon /></.button>
</.dropdown_menu_trigger>
<.dropdown_menu_content color="gray" high_contrast>
<.dropdown_menu_item shortcut="⌘ E">Edit</.dropdown_menu_item>
<.dropdown_menu_item shortcut="⌘ D">Duplicate</.dropdown_menu_item>
<.dropdown_menu_separator />
<.dropdown_menu_item shortcut="⌘ N">Archive</.dropdown_menu_item>
</.dropdown_menu_content>
</.dropdown_menu_root>
<.dropdown_menu_root id="docs-dropdown-menu-hc-soft-off">
<.dropdown_menu_trigger>
<.button color="gray" variant="soft">Options<.dropdown_menu_trigger_icon /></.button>
</.dropdown_menu_trigger>
<.dropdown_menu_content color="gray" variant="soft">
<.dropdown_menu_item shortcut="⌘ E">Edit</.dropdown_menu_item>
<.dropdown_menu_item shortcut="⌘ D">Duplicate</.dropdown_menu_item>
<.dropdown_menu_separator />
<.dropdown_menu_item shortcut="⌘ N">Archive</.dropdown_menu_item>
</.dropdown_menu_content>
</.dropdown_menu_root>
<.dropdown_menu_root id="docs-dropdown-menu-hc-soft-on">
<.dropdown_menu_trigger>
<.button color="gray" variant="soft" high_contrast>
Options<.dropdown_menu_trigger_icon />
</.button>
</.dropdown_menu_trigger>
<.dropdown_menu_content color="gray" variant="soft" high_contrast>
<.dropdown_menu_item shortcut="⌘ E">Edit</.dropdown_menu_item>
<.dropdown_menu_item shortcut="⌘ D">Duplicate</.dropdown_menu_item>
<.dropdown_menu_separator />
<.dropdown_menu_item shortcut="⌘ N">Archive</.dropdown_menu_item>
</.dropdown_menu_content>
</.dropdown_menu_root>
</.grid>