reflex/docs/library/overlay/contextmenu.md

---

components:

- 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

only_low_level:

- True

ContextMenuRoot: |

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
    )

ContextMenuTrigger: |

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

ContextMenuContent: |

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

ContextMenuSubTrigger: |

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

ContextMenuSubContent: |

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

ContextMenuItem: |

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