<.context_menu_root id="docs-context-menu-hero">
<.context_menu_trigger>
<div style="height: 150px; width: 300px; border: 1px dashed var(--gray-a7); border-radius: var(--radius-3); display: flex; align-items: center; justify-content: center; background: var(--gray-a2); user-select: none;">
<.text>Right-click here</.text>
</div>
</.context_menu_trigger>
<.context_menu_content>
<.context_menu_item shortcut="⌘ E">Edit</.context_menu_item>
<.context_menu_item shortcut="⌘ D">Duplicate</.context_menu_item>
<.context_menu_separator />
<.context_menu_item shortcut="⌘ N">Archive</.context_menu_item>
<.context_menu_separator />
<.context_menu_item>Share</.context_menu_item>
<.context_menu_item>Add to favorites</.context_menu_item>
<.context_menu_separator />
<.context_menu_item shortcut="⌘ ⌫" color="red">Delete</.context_menu_item>
</.context_menu_content>
</.context_menu_root>API Reference
This component inherits props from the Context Menu primitive. Content portals into container (default "body").
Root
Contains all the parts of a context 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 element that will open the context menu.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
|
content_id
|
string
|
nil
|
|
disabled
|
boolean
|
false
|
|
id
|
string
|
nil
|
class
Type
string
Default
nil
content_id
Type
string
Default
nil
disabled
Type
boolean
Default
false
id
Type
string
Default
nil
Content
The component that pops out when the context 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 context 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
Group
Used to group multiple items.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
class
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
RadioGroup
Used to group multiple radio items.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
|
value
|
string
|
nil
|
class
Type
string
Default
nil
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
|
|
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
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 context_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 context_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.
<.grid columns="2" gap="3">
<.context_menu_root id="docs-context-menu-size-1">
<.context_menu_trigger>
<div style="height: 150px; border: 1px dashed var(--gray-a7); border-radius: var(--radius-3); display: flex; align-items: center; justify-content: center; background: var(--gray-a2); user-select: none;">
<.text>Size one</.text>
</div>
</.context_menu_trigger>
<.context_menu_content size="1">
<.context_menu_item shortcut="⌘ E">Edit</.context_menu_item>
<.context_menu_item shortcut="⌘ D">Duplicate</.context_menu_item>
<.context_menu_separator />
<.context_menu_item shortcut="⌘ N">Archive</.context_menu_item>
<.context_menu_separator />
<.context_menu_item shortcut="⌘ ⌫" color="red">Delete</.context_menu_item>
</.context_menu_content>
</.context_menu_root>
<.context_menu_root id="docs-context-menu-size-2">
<.context_menu_trigger>
<div style="height: 150px; border: 1px dashed var(--gray-a7); border-radius: var(--radius-3); display: flex; align-items: center; justify-content: center; background: var(--gray-a2); user-select: none;">
<.text>Size two</.text>
</div>
</.context_menu_trigger>
<.context_menu_content size="2">
<.context_menu_item shortcut="⌘ E">Edit</.context_menu_item>
<.context_menu_item shortcut="⌘ D">Duplicate</.context_menu_item>
<.context_menu_separator />
<.context_menu_item shortcut="⌘ N">Archive</.context_menu_item>
<.context_menu_separator />
<.context_menu_item shortcut="⌘ ⌫" color="red">Delete</.context_menu_item>
</.context_menu_content>
</.context_menu_root>
</.grid>Variant
Use the variant prop to customize the visual style of the context menu.
<.grid columns="2" gap="3">
<.context_menu_root id="docs-context-menu-variant-solid">
<.context_menu_trigger>
<div style="height: 150px; border: 1px dashed var(--gray-a7); border-radius: var(--radius-3); display: flex; align-items: center; justify-content: center; background: var(--gray-a2); user-select: none;">
<.text>Solid</.text>
</div>
</.context_menu_trigger>
<.context_menu_content variant="solid">
<.context_menu_item shortcut="⌘ E">Edit</.context_menu_item>
<.context_menu_item shortcut="⌘ D">Duplicate</.context_menu_item>
<.context_menu_separator />
<.context_menu_item shortcut="⌘ N">Archive</.context_menu_item>
<.context_menu_separator />
<.context_menu_item shortcut="⌘ ⌫" color="red">Delete</.context_menu_item>
</.context_menu_content>
</.context_menu_root>
<.context_menu_root id="docs-context-menu-variant-soft">
<.context_menu_trigger>
<div style="height: 150px; border: 1px dashed var(--gray-a7); border-radius: var(--radius-3); display: flex; align-items: center; justify-content: center; background: var(--gray-a2); user-select: none;">
<.text>Soft</.text>
</div>
</.context_menu_trigger>
<.context_menu_content variant="soft">
<.context_menu_item shortcut="⌘ E">Edit</.context_menu_item>
<.context_menu_item shortcut="⌘ D">Duplicate</.context_menu_item>
<.context_menu_separator />
<.context_menu_item shortcut="⌘ N">Archive</.context_menu_item>
<.context_menu_separator />
<.context_menu_item shortcut="⌘ ⌫" color="red">Delete</.context_menu_item>
</.context_menu_content>
</.context_menu_root>
</.grid>Color
Use the color prop to assign a specific color. You can also pass color to a specific item for semantic emphasis (for example, a destructive action).
<.grid columns="2" gap="3">
<.context_menu_root id="docs-context-menu-color-indigo">
<.context_menu_trigger>
<div style="height: 150px; border: 1px dashed var(--gray-a7); border-radius: var(--radius-3); display: flex; align-items: center; justify-content: center; background: var(--gray-a2); user-select: none;">
<.text>Indigo</.text>
</div>
</.context_menu_trigger>
<.context_menu_content color="indigo">
<.context_menu_item shortcut="⌘ E">Edit</.context_menu_item>
<.context_menu_item shortcut="⌘ D">Duplicate</.context_menu_item>
<.context_menu_separator />
<.context_menu_item shortcut="⌘ N">Archive</.context_menu_item>
<.context_menu_separator />
<.context_menu_item shortcut="⌘ ⌫" color="red">Delete</.context_menu_item>
</.context_menu_content>
</.context_menu_root>
<.context_menu_root id="docs-context-menu-color-cyan">
<.context_menu_trigger>
<div style="height: 150px; border: 1px dashed var(--gray-a7); border-radius: var(--radius-3); display: flex; align-items: center; justify-content: center; background: var(--gray-a2); user-select: none;">
<.text>Cyan</.text>
</div>
</.context_menu_trigger>
<.context_menu_content color="cyan">
<.context_menu_item shortcut="⌘ E">Edit</.context_menu_item>
<.context_menu_item shortcut="⌘ D">Duplicate</.context_menu_item>
<.context_menu_separator />
<.context_menu_item shortcut="⌘ N">Archive</.context_menu_item>
<.context_menu_separator />
<.context_menu_item shortcut="⌘ ⌫" color="red">Delete</.context_menu_item>
</.context_menu_content>
</.context_menu_root>
<.context_menu_root id="docs-context-menu-color-orange">
<.context_menu_trigger>
<div style="height: 150px; border: 1px dashed var(--gray-a7); border-radius: var(--radius-3); display: flex; align-items: center; justify-content: center; background: var(--gray-a2); user-select: none;">
<.text>Orange</.text>
</div>
</.context_menu_trigger>
<.context_menu_content color="orange">
<.context_menu_item shortcut="⌘ E">Edit</.context_menu_item>
<.context_menu_item shortcut="⌘ D">Duplicate</.context_menu_item>
<.context_menu_separator />
<.context_menu_item shortcut="⌘ N">Archive</.context_menu_item>
<.context_menu_separator />
<.context_menu_item shortcut="⌘ ⌫" color="red">Delete</.context_menu_item>
</.context_menu_content>
</.context_menu_root>
<.context_menu_root id="docs-context-menu-color-crimson">
<.context_menu_trigger>
<div style="height: 150px; border: 1px dashed var(--gray-a7); border-radius: var(--radius-3); display: flex; align-items: center; justify-content: center; background: var(--gray-a2); user-select: none;">
<.text>Crimson</.text>
</div>
</.context_menu_trigger>
<.context_menu_content color="crimson">
<.context_menu_item shortcut="⌘ E">Edit</.context_menu_item>
<.context_menu_item shortcut="⌘ D">Duplicate</.context_menu_item>
<.context_menu_separator />
<.context_menu_item shortcut="⌘ N">Archive</.context_menu_item>
<.context_menu_separator />
<.context_menu_item shortcut="⌘ ⌫" color="red">Delete</.context_menu_item>
</.context_menu_content>
</.context_menu_root>
</.grid>High-contrast
Use the high_contrast prop to increase color contrast with the background.
<.grid columns="2" gap="3">
<.context_menu_root id="docs-context-menu-hc-off">
<.context_menu_trigger>
<div style="height: 150px; border: 1px dashed var(--gray-a7); border-radius: var(--radius-3); display: flex; align-items: center; justify-content: center; background: var(--gray-a2); user-select: none;">
<.text>Standard</.text>
</div>
</.context_menu_trigger>
<.context_menu_content color="gray">
<.context_menu_item shortcut="⌘ E">Edit</.context_menu_item>
<.context_menu_item shortcut="⌘ D">Duplicate</.context_menu_item>
<.context_menu_separator />
<.context_menu_item shortcut="⌘ N">Archive</.context_menu_item>
</.context_menu_content>
</.context_menu_root>
<.context_menu_root id="docs-context-menu-hc-on">
<.context_menu_trigger>
<div style="height: 150px; border: 1px dashed var(--gray-a7); border-radius: var(--radius-3); display: flex; align-items: center; justify-content: center; background: var(--gray-a2); user-select: none;">
<.text>High-contrast</.text>
</div>
</.context_menu_trigger>
<.context_menu_content color="gray" high_contrast>
<.context_menu_item shortcut="⌘ E">Edit</.context_menu_item>
<.context_menu_item shortcut="⌘ D">Duplicate</.context_menu_item>
<.context_menu_separator />
<.context_menu_item shortcut="⌘ N">Archive</.context_menu_item>
</.context_menu_content>
</.context_menu_root>
</.grid>