Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

Overlay

Contextmenu

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.

rx.context_menu.root(
    rx.context_menu.trigger(
        rx.button("Right click me"),
    ),
    rx.context_menu.content(
        rx.context_menu.item("Edit", shortcut="⌘ E"),
        rx.context_menu.item("Duplicate", shortcut="⌘ D"),
        rx.context_menu.separator(),
        rx.context_menu.item("Archive", shortcut="⌘ N"),
        rx.context_menu.sub(
            rx.context_menu.sub_trigger("More"),
            rx.context_menu.sub_content(
                rx.context_menu.item("Move to project…"),
                rx.context_menu.item("Move to folder…"),
                rx.context_menu.separator(),
                rx.context_menu.item("Advanced options…"),
            ),
        ),
        rx.context_menu.separator(),
        rx.context_menu.item("Share"),
        rx.context_menu.item("Add to favorites"),
        rx.context_menu.separator(),
        rx.context_menu.item(
            "Delete", shortcut="⌘ ⌫", color="red"
        ),
    ),
)

rx.grid(
    rx.context_menu.root(
        rx.context_menu.trigger(
            rx.button("Right click me"),
        ),
        rx.context_menu.content(
            rx.context_menu.item("Edit", shortcut="⌘ E"),
            rx.context_menu.item(
                "Duplicate", shortcut="⌘ D"
            ),
            rx.context_menu.separator(),
            rx.context_menu.item("Archive", shortcut="⌘ N"),
            rx.context_menu.separator(),
            rx.context_menu.item(
                "Delete",
                shortcut="⌘ ⌫",
                color="red",
            ),
            size="1",
        ),
    ),
    rx.context_menu.root(
        rx.context_menu.trigger(
            rx.button("Right click me"),
        ),
        rx.context_menu.content(
            rx.context_menu.item("Edit", shortcut="⌘ E"),
            rx.context_menu.item(
                "Duplicate", shortcut="⌘ D"
            ),
            rx.context_menu.separator(),
            rx.context_menu.item("Archive", shortcut="⌘ N"),
            rx.context_menu.separator(),
            rx.context_menu.item(
                "Delete", shortcut="⌘ ⌫", color="red"
            ),
            size="2",
        ),
    ),
    columns="2",
    spacing="3",
)

API Reference

ContextMenuRoot

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

Context Menu (right click)

Prop	Type	Description	Values
`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.

Event Triggers

Trigger	Description
`on_open_change`	The on_open_change event handler is called when the open state of the component changes.

ContextMenuItem

The component that contains the context menu items.

Context Menu (right click)

Prop	Type	Description	Values
`color_scheme`	Literal	Override theme color for button
`shortcut`	str	Shortcut to render a menu item as a link

Event Triggers

See the full list of default event triggers

ContextMenuSeparator

Separates items in a context menu.

Props

No component specific props

Event Triggers

See the full list of default event triggers

ContextMenuTrigger

Wraps the element that will open the context menu.

Context Menu (right click)

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

Event Triggers

See the full list of default event triggers

ContextMenuContent

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

Context Menu (right click)

Prop	Type	Description
`size`	Literal	Button size "1" - "4"
`variant`	Literal	Variant of button: "solid" \| "soft" \| "outline" \| "ghost"
`color_scheme`	Literal	Override theme color for button
`high_contrast`	bool	Whether to render the button with higher contrast color against background
`align_offset`	int	The vertical distance in pixels from the anchor.
`avoid_collisions`	bool	When true, overrides the side and aligns preferences to prevent collisions with boundary edges.

Event Triggers

Trigger	Description
`on_close_auto_focus`	The on_close_auto_focus event handler is called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault.
`on_escape_key_down`	The on_escape_key_down event handler is called when the escape key is down. It can be prevented by calling event.preventDefault.
`on_pointer_down_outside`	The on_pointer_down_outside event handler is called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.
`on_focus_outside`	The on_focus_outside event handler is called when the user focuses outside the component.
`on_interact_outside`	The on_interact_outside event handler is called when the user interacts outside the component.

ContextMenuSub

Contains all the parts of a submenu.

Props

No component specific props

Event Triggers

See the full list of default event triggers

ContextMenuSubTrigger

An item that opens a submenu.

Context Menu (right click)

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

Event Triggers

See the full list of default event triggers

ContextMenuSubContent

The component that pops out when a submenu is open.

Context Menu (right click)

Prop	Type	Description	Values
`loop`	bool	When true, keyboard navigation will loop from last item to first, and vice versa.

Event Triggers

Trigger	Description
`on_escape_key_down`	The on_escape_key_down event handler is called when the escape key is down. It can be prevented by calling event.preventDefault.
`on_pointer_down_outside`	The on_pointer_down_outside event handler is called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.
`on_focus_outside`	The on_focus_outside event handler is called when the user focuses outside the component.
`on_interact_outside`	The on_interact_outside event handler is called when the user interacts outside the component.