The padding required to prevent the arrow from reaching the very edge of the popper.
Menu
An accessible dropdown menu for the common dropdown menu button design pattern. Menu uses roving tabIndex for focus management.
Props#
Menu Props#
arrowPadding
arrowPaddingnumber8autoSelect
autoSelectIf true, the first enabled menu item will receive focus and be selected
when the menu opens.
booleantrueboundary
boundaryThe boundary area for the popper. Used within the preventOverflow modifier
HTMLElement | "clippingParents" | "scrollParent""clippingParents"closeOnBlur
closeOnBlurIf true, the menu will close when you click outside
the menu list
booleantruecloseOnSelect
closeOnSelectIf true, the menu will close when a menu item is
clicked
booleantruecolorScheme
colorSchemeColor Schemes for Menu are not implemented in the default theme. You can extend the theme to implement them.
stringcomputePositionOnMount
computePositionOnMountbooleandefaultIsOpen
defaultIsOpenbooleandirection
directionIf rtl, poper placement positions will be flipped i.e. 'top-right' will
become 'top-left' and vice-verse
"ltr" | "rtl"eventListeners
eventListenersIf provided, determines whether the popper will reposition itself on scroll
and resize of the window.
boolean | { scroll?: boolean; resize?: boolean; } | undefinedtrueflip
flipIf true, the popper will change its placement and flip when it's
about to overflow its boundary area.
booleantruegutter
gutterThe 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.
number8id
idstringisLazy
isLazyPerformance 🚀:
If true, the MenuItem rendering will be deferred
until the menu is open.
booleanisOpen
isOpenbooleanlazyBehavior
lazyBehaviorPerformance 🚀: 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.
LazyMode"unmount"matchWidth
matchWidthIf true, the popper will match the width of the reference at all times.
It's useful for autocomplete, `date-picker` and select patterns.
booleanmodifiers
modifiersArray of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass. @see Docs https://popper.js.org/docs/v2/modifiers/
Partial<Modifier<string, any>>[]offset
offsetThe main and cross-axis offset to displace popper element from its reference element.
[number, number]onClose
onClose(() => void)onOpen
onOpen(() => void)placement
placementThe placement of the popper relative to its reference.
PlacementWithLogical"bottom"preventOverflow
preventOverflowIf true, will prevent the popper from being cut off and ensure
it's visible within the boundary area.
booleantruesize
sizeSizes for Menu are not implemented in the default theme. You can extend the theme to implement them.
stringstrategy
strategyThe CSS positioning strategy to use.
"fixed" | "absolute""absolute"variant
variantVariants for Menu are not implemented in the default theme. You can extend the theme to implement them.
stringMenuButton Props#
MenuButton composes Box so you can pass all
Box props to change its style.
MenuList Props#
MenuList composes Box so you can pass all Box
props to change its style.
motionProps
motionPropsThe framer-motion props to animate the menu list
HTMLMotionProps<"div">rootProps
rootPropsProps for the root element that positions the menu.
HTMLChakraProps<"div">MenuItem Props#
closeOnSelect
closeOnSelectOverrides the parent menu's closeOnSelect prop.
booleancommand
commandRight-aligned label text content, useful for displaying hotkeys.
stringcommandSpacing
commandSpacingThe spacing between the command and menu item's label.
SystemProps["ml"]icon
iconThe icon to render before the menu item's label.
React.ReactElementiconSpacing
iconSpacingThe spacing between the icon and menu item's label.
SystemProps["mr"]isDisabled
isDisabledIf true, the menuitem will be disabled
booleanisFocusable
isFocusableIf true and the menuitem is disabled, it'll
remain keyboard-focusable
booleanMenuGroup Props#
MenuGroup composes Box so you can pass all
Box props to change its style.
MenuOptionGroup Props#
defaultValue
defaultValuestring | string[]onChange
onChange((value: string | string[]) => void)type
type"checkbox" | "radio"value
valuestring | string[]MenuItemOption Props#
MenuItemOption composes Box so you can pass all
box props in addition to these:
closeOnSelect
closeOnSelectOverrides the parent menu's closeOnSelect prop.
booleancommand
commandRight-aligned label text content, useful for displaying hotkeys.
stringcommandSpacing
commandSpacingThe spacing between the command and menu item's label.
SystemProps["ml"]icon
iconReactElement<any, string | JSXElementConstructor<any>> | nulliconSpacing
iconSpacingThe spacing between the icon and menu item's label.
SystemProps["mr"]isChecked
isCheckedbooleanisDisabled
isDisabledIf true, the menuitem will be disabled
booleanisFocusable
isFocusableIf true and the menuitem is disabled, it'll
remain keyboard-focusable
booleantype
type"checkbox" | "radio"value
valuestringProps#
Menu Props#
arrowPadding
arrowPaddingThe padding required to prevent the arrow from reaching the very edge of the popper.
number8autoSelect
autoSelectIf true, the first enabled menu item will receive focus and be selected
when the menu opens.
booleantrueboundary
boundaryThe boundary area for the popper. Used within the preventOverflow modifier
HTMLElement | "clippingParents" | "scrollParent""clippingParents"closeOnBlur
closeOnBlurIf true, the menu will close when you click outside
the menu list
booleantruecloseOnSelect
closeOnSelectIf true, the menu will close when a menu item is
clicked
booleantruecolorScheme
colorSchemeColor Schemes for Menu are not implemented in the default theme. You can extend the theme to implement them.
stringcomputePositionOnMount
computePositionOnMountbooleandefaultIsOpen
defaultIsOpenbooleandirection
directionIf rtl, poper placement positions will be flipped i.e. 'top-right' will
become 'top-left' and vice-verse
"ltr" | "rtl"eventListeners
eventListenersIf provided, determines whether the popper will reposition itself on scroll
and resize of the window.
boolean | { scroll?: boolean; resize?: boolean; } | undefinedtrueflip
flipIf true, the popper will change its placement and flip when it's
about to overflow its boundary area.
booleantruegutter
gutterThe 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.
number8id
idstringisLazy
isLazyPerformance 🚀:
If true, the MenuItem rendering will be deferred
until the menu is open.
booleanisOpen
isOpenbooleanlazyBehavior
lazyBehaviorPerformance 🚀: 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.
LazyMode"unmount"matchWidth
matchWidthIf true, the popper will match the width of the reference at all times.
It's useful for autocomplete, `date-picker` and select patterns.
booleanmodifiers
modifiersArray of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass. @see Docs https://popper.js.org/docs/v2/modifiers/
Partial<Modifier<string, any>>[]offset
offsetThe main and cross-axis offset to displace popper element from its reference element.
[number, number]onClose
onClose(() => void)onOpen
onOpen(() => void)placement
placementThe placement of the popper relative to its reference.
PlacementWithLogical"bottom"preventOverflow
preventOverflowIf true, will prevent the popper from being cut off and ensure
it's visible within the boundary area.
booleantruesize
sizeSizes for Menu are not implemented in the default theme. You can extend the theme to implement them.
stringstrategy
strategyThe CSS positioning strategy to use.
"fixed" | "absolute""absolute"variant
variantVariants for Menu are not implemented in the default theme. You can extend the theme to implement them.
stringMenuButton Props#
MenuButton composes Box so you can pass all
Box props to change its style.
MenuList Props#
MenuList composes Box so you can pass all Box
props to change its style.
motionProps
motionPropsThe framer-motion props to animate the menu list
HTMLMotionProps<"div">rootProps
rootPropsProps for the root element that positions the menu.
HTMLChakraProps<"div">MenuItem Props#
closeOnSelect
closeOnSelectOverrides the parent menu's closeOnSelect prop.
booleancommand
commandRight-aligned label text content, useful for displaying hotkeys.
stringcommandSpacing
commandSpacingThe spacing between the command and menu item's label.
SystemProps["ml"]icon
iconThe icon to render before the menu item's label.
React.ReactElementiconSpacing
iconSpacingThe spacing between the icon and menu item's label.
SystemProps["mr"]isDisabled
isDisabledIf true, the menuitem will be disabled
booleanisFocusable
isFocusableIf true and the menuitem is disabled, it'll
remain keyboard-focusable
booleanMenuGroup Props#
MenuGroup composes Box so you can pass all
Box props to change its style.
MenuOptionGroup Props#
defaultValue
defaultValuestring | string[]onChange
onChange((value: string | string[]) => void)type
type"checkbox" | "radio"value
valuestring | string[]MenuItemOption Props#
MenuItemOption composes Box so you can pass all
box props in addition to these:
closeOnSelect
closeOnSelectOverrides the parent menu's closeOnSelect prop.
booleancommand
commandRight-aligned label text content, useful for displaying hotkeys.
stringcommandSpacing
commandSpacingThe spacing between the command and menu item's label.
SystemProps["ml"]icon
iconReactElement<any, string | JSXElementConstructor<any>> | nulliconSpacing
iconSpacingThe spacing between the icon and menu item's label.
SystemProps["mr"]isChecked
isCheckedbooleanisDisabled
isDisabledIf true, the menuitem will be disabled
booleanisFocusable
isFocusableIf true and the menuitem is disabled, it'll
remain keyboard-focusable
booleantype
type"checkbox" | "radio"value
valuestring