The Context Menu component displays a popup menu when a user right-clicks or long-presses an element. It’s commonly used for actions contextual to the clicked element.
Basic Usage
import reflex_ui as ui
ui.context_menu(
trigger=ui.button("Right-click me"),
items=[
("Edit", lambda: rx.toast("Edit clicked")),
("Delete", lambda: rx.toast("Delete clicked")),
("Share", lambda: rx.toast("Share clicked")),
]
)
Advanced Structure
For complex context menus, use the component parts:
ui.context_menu.root(
ui.context_menu.trigger(
render_=ui.button("Right-click me")
),
ui.context_menu.portal(
ui.context_menu.positioner(
ui.context_menu.popup(
ui.context_menu.item("Copy"),
ui.context_menu.item("Cut"),
ui.context_menu.item("Paste"),
ui.context_menu.separator(),
ui.context_menu.item("Delete"),
)
)
)
)
With Groups
ui.context_menu.root(
ui.context_menu.trigger(
render_=rx.box("Right-click this box", padding="2rem", border="1px solid gray")
),
ui.context_menu.portal(
ui.context_menu.positioner(
ui.context_menu.popup(
ui.context_menu.group(
ui.context_menu.group_label("Edit"),
ui.context_menu.item("Cut"),
ui.context_menu.item("Copy"),
ui.context_menu.item("Paste"),
),
ui.context_menu.separator(),
ui.context_menu.group(
ui.context_menu.group_label("Actions"),
ui.context_menu.item("Delete"),
ui.context_menu.item("Rename"),
),
)
)
)
)
Checkbox Items
ui.context_menu.root(
ui.context_menu.trigger(
render_=ui.button("Right-click for options")
),
ui.context_menu.portal(
ui.context_menu.positioner(
ui.context_menu.popup(
ui.context_menu.checkbox_item(
"Show Toolbar",
ui.context_menu.checkbox_item_indicator("✓"),
checked=True,
on_checked_change=lambda val: rx.toast(f"Toolbar: {val}")
),
ui.context_menu.checkbox_item(
"Show Sidebar",
ui.context_menu.checkbox_item_indicator("✓"),
checked=False
),
)
)
)
)
Radio Groups
ui.context_menu.root(
ui.context_menu.trigger(
render_=ui.button("Right-click for view options")
),
ui.context_menu.portal(
ui.context_menu.positioner(
ui.context_menu.popup(
ui.context_menu.radio_group(
value="list",
on_value_change=lambda val: rx.toast(f"View: {val}"),
children=[
ui.context_menu.radio_item(
"List View",
ui.context_menu.radio_item_indicator("•"),
value="list"
),
ui.context_menu.radio_item(
"Grid View",
ui.context_menu.radio_item_indicator("•"),
value="grid"
),
ui.context_menu.radio_item(
"Compact View",
ui.context_menu.radio_item_indicator("•"),
value="compact"
),
]
)
)
)
)
)
ui.context_menu.root(
ui.context_menu.trigger(
render_=ui.button("Right-click me")
),
ui.context_menu.portal(
ui.context_menu.positioner(
ui.context_menu.popup(
ui.context_menu.item("New File"),
ui.context_menu.submenu_root(
ui.context_menu.submenu_trigger("Open Recent"),
ui.context_menu.portal(
ui.context_menu.positioner(
ui.context_menu.popup(
ui.context_menu.item("file1.txt"),
ui.context_menu.item("file2.txt"),
)
)
)
),
ui.context_menu.item("Save"),
)
)
)
)
Props Reference
Root Props
Whether the context menu is currently open (controlled)
Whether the context menu is initially open (uncontrolled)
Event handler called when the menu is opened or closed
Whether the component should ignore user interaction
Whether to loop keyboard focus back to the first item
orientation
Literal['vertical', 'horizontal']
default:"vertical"
The visual orientation of the menu
High-Level Props
The component that triggers the context menu on right-click
List of items to display. Can be strings or tuples of (label, on_click_handler).
size
Literal['xs', 'sm', 'md', 'lg', 'xl']
default:"md"
The size of the context menu items
Item Props
Whether to close the context menu when the item is clicked
Whether the item should ignore user interaction
Positioning Props
side
Literal['top', 'right', 'bottom', 'left']
default:"bottom"
Which side of the click position to align the popup against
align
Literal['start', 'center', 'end']
default:"center"
How to align the popup relative to the click position
Styling
From source code at reflex_ui/components/base/context_menu.py:34-54:
- Trigger has
cursor-context-menu cursor style
- Popup has border, shadow, and smooth scale/opacity transitions
- Items have hover highlight states
- Maximum height with scrollbar support
Implementation Details
From source code at reflex_ui/components/base/context_menu.py:527-637:
- High-level API automatically creates all necessary subcomponents
- Triggered by right-click or long press
- Items can be strings or tuples with event handlers
- Supports controlled and uncontrolled state
- Automatic keyboard navigation and focus management
- Portal support for proper z-index layering