Dropdown Menu

A Dropdown Menu is a menu that offers a list of options that a user can select from. They are typically positioned near a button that will control their appearance and disappearance.

A Dropdown Menu is composed of a menu.root, a menu.trigger and a menu.content. The menu.trigger is the element that the user interacts with to open the menu. It wraps the element that will open the dropdown menu. The menu.content is the component that pops out when the dropdown menu is open.

The menu.item contains the actual dropdown menu items and sits under the menu.content. The shortcut prop is an optional shortcut command displayed next to the item text.

The menu.sub contains all the parts of a submenu. There is a menu.sub_trigger, which is an item that opens a submenu. It must be rendered inside a menu.sub component. The menu.sub_component is the component that pops out when a submenu is open. It must also be rendered inside a menu.sub component.

The menu.separator is used to visually separate items in a dropdown menu.

Events when the Dropdown Menu opens or closes

The on_open_change event, from the menu.root, is called when the open state of the dropdown menu changes. It is used in conjunction with the open prop, which is passed to the event handler.

Number of times Dropdown Menu opened or closed: 0

Dropdown Menu open: false

Opening a Dialog from Menu using State

Accessing an overlay component from within another overlay component is a common use case but does not always work exactly as expected.

The code below will not work as expected as because the dialog is within the menu and the dialog will only be open when the menu is open, rendering the dialog unusable.

In this example, we will show how to open a dialog box from a dropdown menu, where the menu will close and the dialog will open and be functional.

API Reference

rx.dropdown_menu.root

The Dropdown Menu Root Component.

PropType | ValuesDefaultInteractive
default_open
bool
open
bool
modal
bool
dir
"ltr" | "rtl"

Event Triggers

See the full list of default event triggers
TriggerDescription
on_open_change Fired when the open state changes.

rx.dropdown_menu.content

The Dropdown Menu Content component that pops out when the dropdown menu is open.

PropType | ValuesDefaultInteractive
size
"1" | "2"
variant
"solid" | "soft"
color_scheme
"tomato" | "red" | ...
high_contrast
bool
as_child
bool
loop
bool
force_mount
bool
side
"top" | "right" | ...
side_offset
Union[float, int]
align
"start" | "center" | ...
align_offset
Union[float, int]
avoid_collisions
bool
collision_padding
Union[float, int, Dict]
arrow_padding
Union[float, int]
sticky
"partial" | "always"
hide_when_detached
bool

Event Triggers

See the full list of default event triggers
TriggerDescription
on_close_auto_focus Fired when the dialog is closed.
on_escape_key_down Fired when the escape key is pressed.
on_pointer_down_outside Fired when the pointer is down outside the dialog.
on_focus_outside Fired when focus moves outside the dialog.
on_interact_outside Fired when the pointer interacts outside the dialog.

rx.dropdown_menu.trigger

The button that toggles the dropdown menu.

PropType | ValuesDefaultInteractive
as_child
bool

rx.dropdown_menu.item

The Dropdown Menu Item Component.

PropType | ValuesDefaultInteractive
color_scheme
"tomato" | "red" | ...
shortcut
str
as_child
bool
disabled
bool
text_value
str

Event Triggers

See the full list of default event triggers
TriggerDescription
on_select Fired when the item is selected.

rx.dropdown_menu.separator

Dropdown Menu Separator Component. Used to visually separate items in the dropdown menu.

Props

No component specific props

rx.dropdown_menu.sub_content

The component that pops out when a submenu is open. Must be rendered inside DropdownMenuSub.

PropType | ValuesDefaultInteractive
as_child
bool
loop
bool
force_mount
bool
side_offset
Union[float, int]
align_offset
Union[float, int]
avoid_collisions
bool
collision_padding
Union[float, int, Dict]
arrow_padding
Union[float, int]
sticky
"partial" | "always"
hide_when_detached
bool

Event Triggers

See the full list of default event triggers
TriggerDescription
on_escape_key_down Fired when the escape key is pressed.
on_pointer_down_outside Fired when the pointer is down outside the dialog.
on_focus_outside Fired when focus moves outside the dialog.
on_interact_outside Fired when the pointer interacts outside the dialog.