Intro

Gallery

Hosting

Components

New

Learn

Components

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	Description
`default_open`	bool	The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state.
`open`	bool	The controlled open state of the dropdown menu. Must be used in conjunction with onOpenChange.
`modal`	bool	The modality of the dropdown menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers. Defaults to True.
`dir`	Literal	The reading direction of submenus when applicable. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.

Event Triggers

Trigger	Description
`on_open_change`	The on_open_change event handler is called when the open state of the component changes.

DropdownMenuContent

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

Prop	Type	Description
`size`	Literal	Dropdown Menu Content size "1" - "2"
`variant`	Literal	Variant of Dropdown Menu Content: "solid" \| "soft"
`color_scheme`	Literal	Override theme color for Dropdown Menu Content
`high_contrast`	bool	Renders the Dropdown Menu Content in higher contrast
`as_child`	bool	Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
`loop`	bool	When True, keyboard navigation will loop from last item to first, and vice versa. Defaults to False.
`force_mount`	bool	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
`side`	Literal	The preferred side of the trigger to render against when open. Will be reversed when collisions occur and `avoid_collisions` is enabled.The position of the tooltip. Defaults to "top".
`side_offset`	Union	The distance in pixels from the trigger. Defaults to 0.
`align`	Literal	The preferred alignment against the trigger. May change when collisions occur. Defaults to "center".
`align_offset`	Union	An offset in pixels from the "start" or "end" alignment options.
`avoid_collisions`	bool	When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.
`collision_padding`	Union	The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
`arrow_padding`	Union	The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
`sticky`	Literal	The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
`hide_when_detached`	bool	Whether to hide the content when the trigger becomes fully occluded. Defaults to False.

Event Triggers

Trigger	Description
`on_close_auto_focus`	The on_close_auto_focus event handler is called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault.
`on_escape_key_down`	The on_escape_key_down event handler is called when the escape key is down. It can be prevented by calling event.preventDefault.
`on_pointer_down_outside`	The on_pointer_down_outside event handler is called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.
`on_focus_outside`	The on_focus_outside event handler is called when the user focuses outside the component.
`on_interact_outside`	The on_interact_outside event handler is called when the user interacts outside the component.

DropdownMenuTrigger

The button that toggles the dropdown menu.

Prop	Type	Description	Values
`as_child`	bool	Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.

Event Triggers

See the full list of default event triggers

DropdownMenuItem

The Dropdown Menu Item Component.

Prop	Type	Description
`color_scheme`	Literal	Override theme color for Dropdown Menu Item
`shortcut`	str	Shortcut to render a menu item as a link
`as_child`	bool	Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
`disabled`	bool	When true, prevents the user from interacting with the item.
`text_value`	str	Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.

Event Triggers

Trigger	Description
`on_select`	The on_select event handler is called when the user selects an item.

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	Description
`as_child`	bool	Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
`loop`	bool	When True, keyboard navigation will loop from last item to first, and vice versa. Defaults to False.
`force_mount`	bool	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
`side_offset`	Union	The distance in pixels from the trigger. Defaults to 0.
`align_offset`	Union	An offset in pixels from the "start" or "end" alignment options.
`avoid_collisions`	bool	When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.
`collision_padding`	Union	The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
`arrow_padding`	Union	The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
`sticky`	Literal	The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
`hide_when_detached`	bool	Whether to hide the content when the trigger becomes fully occluded. Defaults to False.

Event Triggers

Trigger	Description
`on_escape_key_down`	The on_escape_key_down event handler is called when the escape key is down. It can be prevented by calling event.preventDefault.
`on_pointer_down_outside`	The on_pointer_down_outside event handler is called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.
`on_focus_outside`	The on_focus_outside event handler is called when the user focuses outside the component.
`on_interact_outside`	The on_interact_outside event handler is called when the user interacts outside the component.