The Menu component displays a popup containing a list of items that users can select from. It supports various item types including regular items, checkboxes, radio groups, and nested submenus.
Basic Usage
import reflex_ui as ui
ui.menu(
items=["Item 1", "Item 2", "Item 3"],
placeholder="Open Menu"
)
With Actions
ui.menu(
items=[
("Save", lambda: rx.toast.success("Saved")),
("Delete", lambda: rx.toast.error("Deleted")),
("Cancel", lambda: rx.toast.info("Cancelled")),
],
placeholder="Actions"
)
Sizes
ui.menu(items=["Item 1", "Item 2"], size="xs")
ui.menu(items=["Item 1", "Item 2"], size="sm")
ui.menu(items=["Item 1", "Item 2"], size="md") # Default
ui.menu(items=["Item 1", "Item 2"], size="lg")
ui.menu(items=["Item 1", "Item 2"], size="xl")
size
Literal['xs', 'sm', 'md', 'lg', 'xl']
default:"md"
The size of the menu and its trigger button
Custom Trigger
ui.menu(
trigger=ui.button("Custom Trigger", variant="primary"),
items=["Item 1", "Item 2", "Item 3"]
)
Custom trigger component. If not provided, a default button is used.
Advanced Structure
For complex menus, use the component parts:
ui.menu.root(
ui.menu.trigger(
render_=ui.button("Options")
),
ui.menu.portal(
ui.menu.positioner(
ui.menu.popup(
ui.menu.item("Edit"),
ui.menu.item("Delete"),
ui.menu.separator(),
ui.menu.item("Share"),
)
)
)
)
ui.menu.root(
ui.menu.trigger(render_=ui.button("File")),
ui.menu.portal(
ui.menu.positioner(
ui.menu.popup(
ui.menu.group(
ui.menu.group_label("File"),
ui.menu.item("New"),
ui.menu.item("Open"),
ui.menu.item("Save"),
),
ui.menu.separator(),
ui.menu.group(
ui.menu.group_label("Edit"),
ui.menu.item("Cut"),
ui.menu.item("Copy"),
ui.menu.item("Paste"),
),
)
)
)
)
Radio Groups
ui.menu.root(
ui.menu.trigger(render_=ui.button("Sort by")),
ui.menu.portal(
ui.menu.positioner(
ui.menu.popup(
ui.menu.radio_group(
value="name",
on_value_change=lambda val: rx.toast(f"Sorted by: {val}"),
children=[
ui.menu.radio_item(
"Name",
ui.menu.radio_item_indicator("✓"),
value="name"
),
ui.menu.radio_item(
"Date",
ui.menu.radio_item_indicator("✓"),
value="date"
),
ui.menu.radio_item(
"Size",
ui.menu.radio_item_indicator("✓"),
value="size"
),
]
)
)
)
)
)
Checkbox Items
ui.menu.root(
ui.menu.trigger(render_=ui.button("View")),
ui.menu.portal(
ui.menu.positioner(
ui.menu.popup(
ui.menu.checkbox_item(
"Show Toolbar",
ui.menu.checkbox_item_indicator("✓"),
checked=True
),
ui.menu.checkbox_item(
"Show Sidebar",
ui.menu.checkbox_item_indicator("✓"),
checked=False
),
)
)
)
)
Props Reference
Root Props
Whether the menu is currently open (controlled)
Whether the menu is initially open (uncontrolled)
Event handler called when the menu is opened or closed
Whether the component should ignore user interaction
Determines if the menu enters a modal state when open. When true, interaction with the rest of the document is disabled.
Whether to loop keyboard focus back to the first item when the end is reached
orientation
Literal['vertical', 'horizontal']
default:"vertical"
The visual orientation of the menu
High-Level Props
List of items to display. Can be strings or tuples of (label, on_click_handler).
The text to display on the trigger button
Whether to close the menu when an item is clicked
Positioning Props
side
Literal['top', 'right', 'bottom', 'left']
default:"bottom"
Which side of the anchor to align the popup against
align
Literal['start', 'center', 'end']
default:"center"
How to align the popup relative to the specified side
Distance between the anchor and the popup in pixels
Implementation Details
From source code at reflex_ui/components/base/menu.py:557-682:
- High-level API automatically creates all necessary subcomponents
- Items can be strings or tuples with event handlers
- Supports controlled and uncontrolled state management
- Built on Radix UI primitives for accessibility
- Automatic keyboard navigation and focus management