A Context Menu is a popup menu that appears upon user interaction, such as a right-click or a hover.

Basic Usage

A Context Menu is composed of a context_menu.root, a context_menu.trigger and a context_menu.content. The context_menu_root contains all the parts of a context menu. The context_menu.trigger is the element that the user interacts with to open the menu. It wraps the element that will open the context menu. The context_menu.content is the component that pops out when the context menu is open.

The context_menu.item contains the actual context menu items and sits under the context_menu.content.

The context_menu.sub contains all the parts of a submenu. There is a context_menu.sub_trigger, which is an item that opens a submenu. It must be rendered inside a context_menu.sub component. The context_menu.sub_content is the component that pops out when a submenu is open. It must also be rendered inside a context_menu.sub component.

The context_menu.separator is used to visually separate items in a context menu.

Expand

Accessing an overlay component from within another overlay component is a common use case but does not always work exactly as expected.

The code below will not work as expected as because the dialog is within the menu and the dialog will only be open when the menu is open, rendering the dialog unusable.

In this example, we will show how to open a dialog box from a context menu, where the menu will close and the dialog will open and be functional.

Expand

API Reference

rx.context_menu.root

Menu representing a set of actions, displayed at the origin of a pointer right-click or long-press.

Props

Prop	Type	Description
`modal`	`bool`	The modality of the context menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
`dir`	`"ltr""rtl"`	The reading direction of submenus when applicable. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_open_change`	Fired when the open state changes.

rx.context_menu.item

The component that contains the context menu items.

rx.context_menu.root(

rx.context_menu.trigger(

rx.button(

"Context Menu (right click)",

color_scheme=props.get("color_scheme"),

variant=props.get("variant"),

rx.context_menu.content(

rx.context_menu.item("Copy", shortcut="⌘ C",

color_scheme="tomato",

disabled=False,

rx.context_menu.item("Share",

color_scheme="tomato",

disabled=False,

rx.context_menu.item("Delete", shortcut="⌘ ⌫", color="red",

color_scheme="tomato",

disabled=False,

rx.context_menu.sub(

rx.context_menu.sub_trigger("More"),

rx.context_menu.sub_content(

rx.context_menu.item("Eradicate",

color_scheme="tomato",

disabled=False,

rx.context_menu.item("Duplicate",

color_scheme="tomato",

disabled=False,

rx.context_menu.item("Archive",

color_scheme="tomato",

disabled=False,

)

color_scheme

disabled

Props

Prop	Type	Description
`color_scheme`	`"tomato""red""ruby""crimson""pink""plum""purple""violet""iris""indigo""blue""cyan""teal""jade""green""grass""brown""orange""sky""mint""lime""yellow""amber""gold""bronze""gray"`	Override theme color for button.
`shortcut`	`str`	Shortcut to render a menu item as a link.
`as_child`	`bool`	Change the default rendered element for the one passed as a child, merging their props and behavior.
`disabled`	`bool`	When true, prevents the user from interacting with the item.
`text_value`	`str`	Optional text used for typeahead purposes. By default the typeahead behavior will use the content of the item. Use this when the content is complex, or you have non-textual content inside.

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_select`	Fired when the item is selected.

rx.context_menu.separator

Separates items in a context menu.

Props

No component specific props

Event Triggers

See the full list of default event triggers

rx.context_menu.trigger

Wraps the element that will open the context menu.

rx.context_menu.root(

rx.context_menu.trigger(

rx.button(

"Context Menu (right click)",

color_scheme=props.get("color_scheme"),

variant=props.get("variant"),

disabled=False,

rx.context_menu.content(

rx.context_menu.item("Copy", shortcut="⌘ C"),

rx.context_menu.item("Share"),

rx.context_menu.item("Delete", shortcut="⌘ ⌫", color="red"),

rx.context_menu.sub(

rx.context_menu.sub_trigger("More"),

rx.context_menu.sub_content(

rx.context_menu.item("Eradicate"),

rx.context_menu.item("Duplicate"),

rx.context_menu.item("Archive"),

)

disabled

Props

Prop	Type	Description
`disabled`	`bool`	Whether the trigger is disabled.

Event Triggers

See the full list of default event triggers

rx.context_menu.content

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

rx.context_menu.root(

rx.context_menu.trigger(

rx.button(

"Context Menu (right click)",

color_scheme=props.get("color_scheme"),

variant=props.get("variant"),

rx.context_menu.content(

rx.context_menu.item("Copy", shortcut="⌘ C"),

rx.context_menu.item("Share"),

rx.context_menu.item("Delete", shortcut="⌘ ⌫", color="red"),

rx.context_menu.sub(

rx.context_menu.sub_trigger("More"),

rx.context_menu.sub_content(

rx.context_menu.item("Eradicate"),

rx.context_menu.item("Duplicate"),

rx.context_menu.item("Archive"),

size="1",

variant="solid",

color_scheme="tomato",

high_contrast=False,

align="start",

)

size

variant

color_scheme

high_contrast

align

Props

Prop	Type	Description
`size`	`"1""2"`	Dropdown Menu Content size "1" - "2".
`variant`	`"solid""soft"`	Variant of Dropdown Menu Content: "solid" \| "soft".
`color_scheme`	`"tomato""red""ruby""crimson""pink""plum""purple""violet""iris""indigo""blue""cyan""teal""jade""green""grass""brown""orange""sky""mint""lime""yellow""amber""gold""bronze""gray"`	Override theme color for Dropdown Menu Content.
`high_contrast`	`bool`	Renders the Dropdown Menu Content in higher contrast.
`as_child`	`bool`	Change the default rendered element for the one passed as a child, merging their props and behavior.
`loop`	`bool`	When True, keyboard navigation will loop from last item to first, and vice versa.
`force_mount`	`bool`	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
`side`	`"top""right""bottom""left"`	The preferred side of the trigger to render against when open. Will be reversed when collisions occur and `avoid_collisions` is enabled.The position of the tooltip.
`side_offset`	`Union[float, int]`	The distance in pixels from the trigger.
`align`	`"start""center""end"`	The preferred alignment against the trigger. May change when collisions occur.
`align_offset`	`Union[float, int]`	An offset in pixels from the "start" or "end" alignment options.
`avoid_collisions`	`bool`	When true, overrides the side and align preferences to prevent collisions with boundary edges.
`collision_padding`	`Union[float, int, dict]`	The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }.
`sticky`	`"partial""always"`	The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless.
`hide_when_detached`	`bool`	Whether to hide the content when the trigger becomes fully occluded.

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_close_auto_focus`	Fired when focus moves back after closing.
`on_escape_key_down`	Fired when the escape key is pressed.
`on_pointer_down_outside`	Fired when a pointer down event happens outside the context menu.
`on_focus_outside`	Fired when focus moves outside the context menu.
`on_interact_outside`	Fired when the pointer interacts outside the context menu.

rx.context_menu.sub

Contains all the parts of a submenu.

Props

Prop	Type	Description
`open`	`bool`	The controlled open state of the submenu. Must be used in conjunction with `on_open_change`.
`default_open`	`bool`	The open state of the submenu when it is initially rendered. Use when you do not need to control its open state.

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_open_change`	Fired when the open state changes.

rx.context_menu.sub_trigger

An item that opens a submenu.

rx.context_menu.root(

rx.context_menu.trigger(

rx.button(

"Context Menu (right click)",

color_scheme=props.get("color_scheme"),

variant=props.get("variant"),

rx.context_menu.content(

rx.context_menu.item("Copy", shortcut="⌘ C"),

rx.context_menu.item("Share"),

rx.context_menu.item("Delete", shortcut="⌘ ⌫", color="red"),

rx.context_menu.sub(

rx.context_menu.sub_trigger("More",

disabled=False,

rx.context_menu.sub_content(

rx.context_menu.item("Eradicate"),

rx.context_menu.item("Duplicate"),

rx.context_menu.item("Archive"),

)

disabled

Props

Prop	Type	Description
`as_child`	`bool`	Change the default rendered element for the one passed as a child, merging their props and behavior.
`disabled`	`bool`	Whether the trigger is disabled.
`text_value`	`str`	Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.

Event Triggers

See the full list of default event triggers

rx.context_menu.sub_content

The component that pops out when a submenu is open.

Props

Prop	Type	Description
`as_child`	`bool`	Change the default rendered element for the one passed as a child, merging their props and behavior.
`loop`	`bool`	When True, keyboard navigation will loop from last item to first, and vice versa.
`force_mount`	`bool`	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
`side_offset`	`Union[float, int]`	The distance in pixels from the trigger.
`align_offset`	`Union[float, int]`	An offset in pixels from the "start" or "end" alignment options.
`avoid_collisions`	`bool`	When true, overrides the side and align preferences to prevent collisions with boundary edges.
`collision_padding`	`Union[float, int, dict]`	The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }.
`sticky`	`"partial""always"`	The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless.
`hide_when_detached`	`bool`	Whether to hide the content when the trigger becomes fully occluded.

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_escape_key_down`	Fired when the escape key is pressed.
`on_pointer_down_outside`	Fired when a pointer down event happens outside the context menu.
`on_focus_outside`	Fired when focus moves outside the context menu.
`on_interact_outside`	Fired when interacting outside the context menu.

Learn

Components

API Reference

Enterprise

Core

Graphing

Other

Custom Components

Context Menu

Basic Usage

Opening a Dialog from Context Menu using State

API Reference

rx.context_menu.root

Props

Event Triggers

rx.context_menu.item

Props

Event Triggers

rx.context_menu.separator

Props

Event Triggers

rx.context_menu.trigger

Props

Event Triggers

rx.context_menu.content

Props

Event Triggers

rx.context_menu.sub

Props

Event Triggers

rx.context_menu.sub_trigger

Props

Event Triggers

rx.context_menu.sub_content

Props

Event Triggers