Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

Overlay

Dropdownmenu

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.

rx.menu.root(
    rx.menu.trigger(
        rx.button("Options", variant="soft"),
    ),
    rx.menu.content(
        rx.menu.item("Edit", shortcut="⌘ E"),
        rx.menu.item("Duplicate", shortcut="⌘ D"),
        rx.menu.separator(),
        rx.menu.item("Archive", shortcut="⌘ N"),
        rx.menu.sub(
            rx.menu.sub_trigger("More"),
            rx.menu.sub_content(
                rx.menu.item("Move to project…"),
                rx.menu.item("Move to folder…"),
                rx.menu.separator(),
                rx.menu.item("Advanced options…"),
            ),
        ),
        rx.menu.separator(),
        rx.menu.item("Share"),
        rx.menu.item("Add to favorites"),
        rx.menu.separator(),
        rx.menu.item("Delete", shortcut="⌘ ⌫", color="red"),
    ),
)

Size

rx.flex(
    rx.menu.root(
        rx.menu.trigger(
            rx.button("Options", variant="soft", size="2"),
        ),
        rx.menu.content(
            rx.menu.item("Edit", shortcut="⌘ E"),
            rx.menu.item("Duplicate", shortcut="⌘ D"),
            rx.menu.separator(),
            rx.menu.item("Archive", shortcut="⌘ N"),
            rx.menu.separator(),
            rx.menu.item(
                "Delete", shortcut="⌘ ⌫", color="red"
            ),
            size="2",
        ),
    ),
    rx.menu.root(
        rx.menu.trigger(
            rx.button("Options", variant="soft", size="1"),
        ),
        rx.menu.content(
            rx.menu.item("Edit", shortcut="⌘ E"),
            rx.menu.item("Duplicate", shortcut="⌘ D"),
            rx.menu.separator(),
            rx.menu.item("Archive", shortcut="⌘ N"),
            rx.menu.separator(),
            rx.menu.item(
                "Delete", shortcut="⌘ ⌫", color="red"
            ),
            size="1",
        ),
    ),
    spacing="3",
    align="center",
)

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

class DropdownMenuState(rx.State):
    num_opens: int = 0
    opened: bool = False

    def count_opens(self, value: bool):
        self.opened = value
        self.num_opens += 1


def dropdown_menu_example():
    return rx.flex(
        rx.heading(
            f"Number of times Dropdown Menu opened or closed: {DropdownMenuState.num_opens}"
        ),
        rx.heading(
            f"Dropdown Menu open: {DropdownMenuState.opened}"
        ),
        rx.menu.root(
            rx.menu.trigger(
                rx.button(
                    "Options", variant="soft", size="2"
                ),
            ),
            rx.menu.content(
                rx.menu.item("Edit", shortcut="⌘ E"),
                rx.menu.item("Duplicate", shortcut="⌘ D"),
                rx.menu.separator(),
                rx.menu.item("Archive", shortcut="⌘ N"),
                rx.menu.separator(),
                rx.menu.item(
                    "Delete", shortcut="⌘ ⌫", color="red"
                ),
            ),
            on_open_change=DropdownMenuState.count_opens,
        ),
        direction="column",
        spacing="3",
    )

API Reference

DropdownMenuRoot

The Dropdown Menu Root Component.

Prop	Type	Default Value	Values
`default_open`	bool
`open`	bool
`modal`	bool
`dir`	Literal

Event Triggers

Trigger	Description
`on_open_change`	Fired when the open state changes.

DropdownMenuContent

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

Prop	Type	Default Value	Values
`size`	Union[Literal, Breakpoints]
`variant`	Literal
`color_scheme`	Literal
`high_contrast`	bool
`as_child`	bool
`loop`	bool
`force_mount`	bool
`side`	Literal
`side_offset`	Union[float, int]
`align`	Literal
`align_offset`	Union[float, int]
`avoid_collisions`	bool
`collision_padding`	Union[float, int, Dict]
`arrow_padding`	Union[float, int]
`sticky`	Literal
`hide_when_detached`	bool

Event Triggers

Trigger	Description
`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.

DropdownMenuTrigger

The button that toggles the dropdown menu.

Prop	Type	Default Value	Values
`as_child`	bool

Event Triggers

See the full list of default event triggers

DropdownMenuItem

The Dropdown Menu Item Component.

Prop	Type	Default Value	Values
`color_scheme`	Literal
`shortcut`	str
`as_child`	bool
`disabled`	bool
`text_value`	str

Event Triggers

Trigger	Description
`on_select`	Fired when the item is selected.

DropdownMenuSeparator

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

Props

No component specific props

Event Triggers

See the full list of default event triggers

DropdownMenuSubContent

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

Prop	Type	Default Value	Values
`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`	Literal
`hide_when_detached`	bool

Event Triggers

Trigger	Description
`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.