Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Library

/

Overlay

/

Contextmenu

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

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",
)

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

Context Menu (right click)

PropTypeDescriptionValues
modalbool

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

TriggerDescription
on_open_change

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

The component that contains the context menu items.

Context Menu (right click)

PropTypeDescriptionValues
color_schemeLiteral

Override theme color for button

shortcutstr

Shortcut to render a menu item as a link

Event Triggers

No component specific event triggers

Separates items in a context menu.

Props

No component specific props

Event Triggers

No component specific event triggers

Wraps the element that will open the context menu.

Context Menu (right click)

PropTypeDescriptionValues
disabledbool

Whether the trigger is disabled

Event Triggers

No component specific event triggers

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

Context Menu (right click)

PropTypeDescriptionValues
sizeLiteral

Button size "1" - "4"

variantLiteral

Variant of button: "solid" | "soft" | "outline" | "ghost"

color_schemeLiteral

Override theme color for button

high_contrastbool

Whether to render the button with higher contrast color against background

align_offsetint

The vertical distance in pixels from the anchor.

avoid_collisionsbool

When true, overrides the side and aligns preferences to prevent collisions with boundary edges.

Event Triggers

TriggerDescription
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.

Contains all the parts of a submenu.

Props

No component specific props

Event Triggers

No component specific event triggers

An item that opens a submenu.

Context Menu (right click)

PropTypeDescriptionValues
disabledbool

Whether the trigger is disabled

Event Triggers

No component specific event triggers

The component that pops out when a submenu is open.

Context Menu (right click)

PropTypeDescriptionValues
loopbool

When true, keyboard navigation will loop from last item to first, and vice versa.

Event Triggers

TriggerDescription
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.

← AlertdialogDialog →

Did you find this useful?