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.

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.

API Reference

rx.context_menu.root

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

Context Menu (right click)

Prop	Type \| Values	Default	Interactive
`modal`	`bool`		false
`dir`	`"ltr" \| "rtl"`

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.

Context Menu (right click)

Prop	Type \| Values	Interactive
`color_scheme`	`"tomato" \| "red" \| ...`
`shortcut`	`str`
`as_child`	`bool`
`disabled`	`bool`	false
`text_value`	`str`

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.

Context Menu (right click)

Prop	Type \| Values	Default	Interactive
`disabled`	`bool`		false

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.

Context Menu (right click)

Prop	Type \| Values	Interactive
`size`	`"1" \| "2"`
`variant`	`"solid" \| "soft"`
`color_scheme`	`"tomato" \| "red" \| ...`
`high_contrast`	`bool`	false
`as_child`	`bool`
`loop`	`bool`	false
`force_mount`	`bool`	false
`side`	`"top" \| "right" \| ...`
`side_offset`	`Union[float, int]`
`align`	`"start" \| "center" \| ...`
`align_offset`	`Union[float, int]`
`avoid_collisions`	`bool`	false
`collision_padding`	`Union[float, int, Dict]`
`sticky`	`"partial" \| "always"`
`hide_when_detached`	`bool`	false

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.

Context Menu (right click)

Prop	Type \| Values	Default	Interactive
`open`	`bool`
`default_open`	`bool`

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.

Context Menu (right click)

Prop	Type \| Values	Interactive
`as_child`	`bool`
`disabled`	`bool`	false
`text_value`	`str`

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.

Context Menu (right click)

Prop	Type \| Values	Interactive
`as_child`	`bool`
`loop`	`bool`	false
`force_mount`	`bool`	false
`side_offset`	`Union[float, int]`
`align_offset`	`Union[float, int]`
`avoid_collisions`	`bool`	false
`collision_padding`	`Union[float, int, Dict]`
`sticky`	`"partial" \| "always"`
`hide_when_detached`	`bool`	false

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

Recipes

API Reference

Context Menu

Basic Usage

API Reference

rx.context_menu.root

Event Triggers

rx.context_menu.item

Event Triggers

rx.context_menu.separator

Props

Event Triggers

rx.context_menu.trigger

Event Triggers

rx.context_menu.content

Event Triggers

rx.context_menu.sub

Event Triggers

rx.context_menu.sub_trigger

Event Triggers

rx.context_menu.sub_content

Event Triggers