An accessible dropdown menu for the common dropdown menu button design pattern.

rc.menu(
    rc.menu_button("Menu"),
    rc.menu_list(
        rc.menu_item("Example"),
        rc.menu_divider(),
        rc.menu_item("Example"),
        rc.menu_item("Example"),
    ),
)

rc.Menu

The wrapper component provides context, state, and focus management.

PropType | ValuesDefault
arrow_padding
int
auto_select
bool
boundary
str
close_on_blur
bool
close_on_select
bool
default_is_open
bool
direction
"ltr" | "rtl"
flip
bool
gutter
int
is_lazy
bool
lazy_behavior
str
is_open
bool
match_width
bool
placement
str
prevent_overflow
bool
strategy
"fixed" | "absolute"

Event Triggers

See the full list of default event triggers
TriggerDescription
on_close Fired when the menu is closed.
on_open Fired when the menu is opened.

rc.MenuButton

The trigger for the menu list. Must be a direct child of Menu.

PropType | ValuesDefault
variant
str
as_
str

rc.MenuList

The wrapper for the menu items. Must be a direct child of Menu.

Props

No component specific props

rc.MenuItem

The trigger that handles menu selection. Must be a direct child of a MenuList.

PropType | ValuesDefault
close_on_select
bool
command
str
command_spacing
int
is_disabled
bool
is_focusable
bool

rc.MenuDivider

A visual separator for menu items and groups.

Props

No component specific props

rc.MenuGroup

A wrapper to group related menu items.

Props

No component specific props

rc.MenuOptionGroup

A wrapper for checkable menu items (radio and checkbox).

PropType | ValuesDefault
type_
"checkbox" | "radio"
value
str

rc.MenuItemOption

The checkable menu item, to be used with MenuOptionGroup.

PropType | ValuesDefault
close_on_select
bool
command
str
command_spacing
int
is_checked
bool
is_disabled
bool
is_focusable
bool
type_
"checkbox" | "radio"
value
str