Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Chakra

/

Overlay

/

Menu

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

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

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

PropTypeDescriptionValues
arrow_paddingint

The padding required to prevent the arrow from reaching the very edge of the popper.

auto_selectbool

If true, the first enabled menu item will receive focus and be selected when the menu opens.

boundarystr

The boundary area for the popper. Used within the preventOverflow modifier

close_on_blurbool

If true, the menu will close when you click outside the menu list

close_on_selectbool

If true, the menu will close when a menu item is clicked

default_is_openbool

If by default the menu is open.

directionLiteral

If rtl, popper placement positions will be flipped i.e. 'top-right' will become 'top-left' and vice-verse ("ltr" | "rtl")

flipbool

If true, the popper will change its placement and flip when it's about to overflow its boundary area.

gutterint

The distance or margin between the reference and popper. It is used internally to create an offset modifier. NB: If you define offset prop, it'll override the gutter.

is_lazybool

Performance 🚀: If true, the MenuItem rendering will be deferred until the menu is open.

lazy_behaviorstr

Performance 🚀: The lazy behavior of menu's content when not visible. Only works when isLazy={true} - "unmount": The menu's content is always unmounted when not open. - "keepMounted": The menu's content initially unmounted, but stays mounted when menu is open.

is_openbool

Determines if the menu is open or not.

match_widthbool

If true, the popper will match the width of the reference at all times. It's useful for autocomplete, date-picker and select patterns.

placementstr

The placement of the popper relative to its reference.

prevent_overflowbool

If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.

strategyLiteral

The CSS positioning strategy to use. ("fixed" | "absolute")

Event Triggers

TriggerDescription
on_close

The on_close event handler is called when the user closes a form. For example, it is called when the user clicks on a close button.

on_open

The on_open event handler is called when the user opens a form. For example, it is called when the user clicks on a open button.

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

PropTypeDescriptionValues
variantstr

The variant of the menu button.

as_str

Components that are not allowed as children. The tag to use for the menu button.

Event Triggers

No component specific event triggers

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

Props

No component specific props

Event Triggers

No component specific event triggers

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

PropTypeDescriptionValues
close_on_selectbool

Overrides the parent menu's closeOnSelect prop.

commandstr

Right-aligned label text content, useful for displaying hotkeys.

command_spacingint

The spacing between the command and menu item's label.

is_disabledbool

If true, the menuitem will be disabled.

is_focusablebool

If true and the menuitem is disabled, it'll remain keyboard-focusable

Event Triggers

No component specific event triggers

A visual separator for menu items and groups.

Props

No component specific props

Event Triggers

No component specific event triggers

A wrapper to group related menu items.

Props

No component specific props

Event Triggers

No component specific event triggers

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

PropTypeDescriptionValues
type_Literal

"checkbox" | "radio"

valuestr

Value of the option group.

Event Triggers

No component specific event triggers

The checkable menu item, to be used with MenuOptionGroup.

PropTypeDescriptionValues
close_on_selectbool

Overrides the parent menu's closeOnSelect prop.

commandstr

Right-aligned label text content, useful for displaying hotkeys.

command_spacingint

The spacing between the command and menu item's label.

is_checkedbool

Determines if menu item is checked.

is_disabledbool

If true, the menuitem will be disabled.

is_focusablebool

If true and the menuitem is disabled, it'll remain keyboard-focusable

type_Literal

"checkbox" | "radio"

valuestr

Value of the menu item.

Event Triggers

No component specific event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting