Intro

Gallery

Hosting

Learn

Components

Recipes

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	Default Value	Values
`modal`	bool

Event Triggers

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

ContextMenuItem

The component that contains the context menu items.

Context Menu (right click)

Prop	Type	Default Value	Values
`color_scheme`	Literal
`shortcut`	str

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	Default Value	Values
`disabled`	bool

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	Default Value	Values
`size`	Union[Literal, Breakpoints]
`variant`	Literal
`color_scheme`	Literal
`high_contrast`	bool
`align_offset`	int
`avoid_collisions`	bool

Event Triggers

Trigger	Description
`on_close_auto_focus`	Fired when the context menu is closed.
`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.

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	Default Value	Values
`disabled`	bool

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	Default Value	Values
`loop`	bool

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.