reflex/docs/library/overlay/contextmenu.md

components	only_low_level	ContextMenuRoot	ContextMenuTrigger	ContextMenuContent	ContextMenuSubTrigger	ContextMenuSubContent	ContextMenuItem
rx.radix.context_menu.root rx.radix.context_menu.item rx.radix.context_menu.separator rx.radix.context_menu.trigger rx.radix.context_menu.content rx.radix.context_menu.sub rx.radix.context_menu.sub_trigger rx.radix.context_menu.sub_content	True	lambda **props: rx.radix.themes.context_menu.root( rx.radix.themes.context_menu.trigger( rx.radix.themes.text("Context Menu (right click)") ), rx.radix.themes.context_menu.content( rx.radix.themes.context_menu.item("Copy", shortcut="⌘ C"), rx.radix.themes.context_menu.item("Share"), rx.radix.themes.context_menu.item("Delete", shortcut="⌘ ⌫", color="red"), rx.radix.themes.context_menu.sub( rx.radix.themes.context_menu.sub_trigger("More"), rx.radix.themes.context_menu.sub_content( rx.radix.themes.context_menu.item("Eradicate"), rx.radix.themes.context_menu.item("Duplicate"), rx.radix.themes.context_menu.item("Archive"), ), ), ), **props )	lambda **props: rx.radix.themes.context_menu.root( rx.radix.themes.context_menu.trigger( rx.radix.themes.text("Context Menu (right click)"), **props ), rx.radix.themes.context_menu.content( rx.radix.themes.context_menu.item("Copy", shortcut="⌘ C"), rx.radix.themes.context_menu.item("Share"), rx.radix.themes.context_menu.item("Delete", shortcut="⌘ ⌫", color="red"), rx.radix.themes.context_menu.sub( rx.radix.themes.context_menu.sub_trigger("More"), rx.radix.themes.context_menu.sub_content( rx.radix.themes.context_menu.item("Eradicate"), rx.radix.themes.context_menu.item("Duplicate"), rx.radix.themes.context_menu.item("Archive"), ), ), ), )	lambda **props: rx.radix.themes.context_menu.root( rx.radix.themes.context_menu.trigger( rx.radix.themes.text("Context Menu (right click)") ), rx.radix.themes.context_menu.content( rx.radix.themes.context_menu.item("Copy", shortcut="⌘ C"), rx.radix.themes.context_menu.item("Share"), rx.radix.themes.context_menu.item("Delete", shortcut="⌘ ⌫", color="red"), rx.radix.themes.context_menu.sub( rx.radix.themes.context_menu.sub_trigger("More"), rx.radix.themes.context_menu.sub_content( rx.radix.themes.context_menu.item("Eradicate"), rx.radix.themes.context_menu.item("Duplicate"), rx.radix.themes.context_menu.item("Archive"), ), ), **props ), )	lambda **props: rx.radix.themes.context_menu.root( rx.radix.themes.context_menu.trigger( rx.radix.themes.text("Context Menu (right click)") ), rx.radix.themes.context_menu.content( rx.radix.themes.context_menu.item("Copy", shortcut="⌘ C"), rx.radix.themes.context_menu.item("Share"), rx.radix.themes.context_menu.item("Delete", shortcut="⌘ ⌫", color="red"), rx.radix.themes.context_menu.sub( rx.radix.themes.context_menu.sub_trigger("More", **props), rx.radix.themes.context_menu.sub_content( rx.radix.themes.context_menu.item("Eradicate"), rx.radix.themes.context_menu.item("Duplicate"), rx.radix.themes.context_menu.item("Archive"), ), ), ), )	lambda **props: rx.radix.themes.context_menu.root( rx.radix.themes.context_menu.trigger( rx.radix.themes.text("Context Menu (right click)") ), rx.radix.themes.context_menu.content( rx.radix.themes.context_menu.item("Copy", shortcut="⌘ C"), rx.radix.themes.context_menu.item("Share"), rx.radix.themes.context_menu.item("Delete", shortcut="⌘ ⌫", color="red"), rx.radix.themes.context_menu.sub( rx.radix.themes.context_menu.sub_trigger("More"), rx.radix.themes.context_menu.sub_content( rx.radix.themes.context_menu.item("Eradicate"), rx.radix.themes.context_menu.item("Duplicate"), rx.radix.themes.context_menu.item("Archive"), **props ), ), ), )	lambda **props: rx.radix.themes.context_menu.root( rx.radix.themes.context_menu.trigger( rx.radix.themes.text("Context Menu (right click)") ), rx.radix.themes.context_menu.content( rx.radix.themes.context_menu.item("Copy", shortcut="⌘ C", **props), rx.radix.themes.context_menu.item("Share", **props), rx.radix.themes.context_menu.item("Delete", shortcut="⌘ ⌫", color="red", **props), rx.radix.themes.context_menu.sub( rx.radix.themes.context_menu.sub_trigger("More"), rx.radix.themes.context_menu.sub_content( rx.radix.themes.context_menu.item("Eradicate", **props), rx.radix.themes.context_menu.item("Duplicate", **props), rx.radix.themes.context_menu.item("Archive", **props), ), ), ), )

import reflex as rx

Context Menu

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