animation
Description
The animation of the popover.
Type
"bottom" | "left" | "right" | "scale" | "top" | "none"Default
'scale'Menu
Menu is a component that displays a common dropdown menu.
Props
MenuProps
autoFocus
Description
If true, focus will be transferred to the first interactive element when the popover opens.
Type
booleanDefault
trueboundary
Description
The boundary area for the popper. Used within the preventOverflow modifier.
Type
HTMLElement | "clippingParents" | "scrollParent"Default
'clippingParents'closeDelay
Description
The number of delay time to close.
Type
numberDefault
200closeOnBlur
Description
If true, the popover will close when you blur out it by clicking outside or tabbing out.
Type
booleanDefault
truecloseOnEsc
Description
If true, the popover will close when you hit the Esc key.
Type
booleanDefault
truecloseOnSelect
Description
If true, the list element will be closed when value is selected.
Type
booleanDefault
truedefaultIsOpen
Description
If true, the popover will be initially opened.
Type
booleanduration
Description
The animation duration.
Type
number | Partial<Record<"exit" | "enter", number>>eventListeners
Description
If provided, determines whether the popper will reposition itself on scroll and resize of the window.
Type
type ONLY_FOR_FORMAT =
| boolean
| { scroll?: boolean | undefined; resize?: boolean | undefined }Default
trueflip
Description
If true, the popper will change its placement and flip when it's about to overflow its boundary area.
Type
booleanDefault
truegutter
Description
The distance or margin between the reference and popper.
It is used internally to create an offset modifier.
Type
UIValue<number>Default
8initialFocusRef
Description
The ref of the element that should receive focus when the popover opens.
Type
RefObject<{ focus(): void }>isLazy
Description
If true, the PopoverContent rendering will be deferred until the popover is open.
Type
booleanDefault
falseisOpen
Description
If true, the popover will be opened.
Type
booleanlazyBehavior
Description
The lazy behavior of popover's content when not visible. Only works when isLazy={true}
- unmount: The popover's content is always unmounted when not open.
- keepMounted: The popover's content initially unmounted, but stays mounted when popover is open.
Type
LazyModeDefault
'unmount'matchWidth
Description
If true, the popper will match the width of the reference at all times.
It's useful for autocomplete, date-picker and select patterns.
Type
booleanDefault
falsemodifiers
Description
Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.
Type
Partial<Modifier<string, any>>[]Docs
https://popper.js.org/docs/v2/modifiers/offset
Description
The main and cross-axis offset to displace popper element from its reference element.
Type
[number, number]onClose
Description
Callback fired when the popover closes.
Type
() => voidonOpen
Description
Callback fired when the popover opens.
Type
() => voidopenDelay
Description
The number of delay time to open.
Type
numberDefault
200placement
Description
The placement of the popper relative to its reference.
Type
UIValue<Placement>Default
'bottom'preventOverflow
Description
If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.
Type
booleanDefault
truerestoreFocus
Description
If true, focus will be returned to the element that triggers the popover when it closes.
Type
booleanDefault
truestrategy
Description
The CSS positioning strategy to use.
Type
"fixed" | "absolute"Default
'absolute'trigger
Description
The interaction that triggers the popover.
- hover: means the popover will open when you hover with mouse or focus with keyboard on the popover trigger.
- click: means the popover will open on click or press Enter to Space on keyboard.
Type
"click" | "hover" | "never" | "contextmenu"Default
'click'MenuButtonProps
MenuItemButtonProps
icon
Type
type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortaliconProps
Type
MenuIconPropsinnerProps
Type
HTMLUIProps<"span">MenuListProps
contentProps
Type
MotionPropsWithoutChildrenMenuItemProps
closeOnSelect
Description
If true, the list element will be closed when selected.
Type
booleanDefault
falsecommand
Description
Right-aligned label text content, useful for displaying hotkeys.
Type
stringicon
Description
The menu item icon to use.
Type
ReactElement<any, string | JSXElementConstructor<any>>isDisabled
Description
If true, the menu item will be disabled.
Type
booleanDefault
falseisFocusable
Description
If true, the menu item will be focusable.
Type
booleanDefault
falseMenuOptionItemProps
closeOnSelect
Description
If true, the list element will be closed when selected.
Type
booleanDefault
falseicon
Description
The menu option item icon to use.
Type
ReactElement<any, string | JSXElementConstructor<any>>isChecked
Description
If true, the checkbox or radio will be checked.
Type
booleanDefault
falseisDisabled
Description
If true, the menu item will be disabled.
Type
booleanDefault
falseisFocusable
Description
If true, the menu item will be focusable.
Type
booleanDefault
falsetype
Description
The type of the menu option item.
Type
"checkbox" | "radio"MenuIconProps
MenuCommandProps
MenuGroupProps
label
Description
The label of the group.
Type
stringlabelProps
Description
Props for menu group element.
Type
HTMLUIProps<"span">MenuOptionGroupProps
defaultValue
Description
The initial value of the menu item group.
Type
Ylabel
Description
The label of the group.
Type
stringlabelProps
Description
Props for menu group element.
Type
HTMLUIProps<"span">onChange
Description
The callback fired when any children checkbox is checked or unchecked.
Type
(value: Y) => voidtype
Description
The type of the menu option group.
Type
"checkbox" | "radio"Default
'checkbox'value
Description
The value of the menu item group.
Type
YMenuDividerProps
ContextMenuProps
animation
Description
The animation of the popover.
Type
"bottom" | "left" | "right" | "scale" | "top" | "none"Default
'scale'autoFocus
Description
If true, focus will be transferred to the first interactive element when the popover opens.
Type
booleanDefault
trueboundary
Description
The boundary area for the popper. Used within the preventOverflow modifier.
Type
HTMLElement | "clippingParents" | "scrollParent"Default
'clippingParents'closeDelay
Description
The number of delay time to close.
Type
numberDefault
200closeOnBlur
Description
If true, the popover will close when you blur out it by clicking outside or tabbing out.
Type
booleanDefault
truecloseOnEsc
Description
If true, the popover will close when you hit the Esc key.
Type
booleanDefault
truecloseOnSelect
Description
If true, the list element will be closed when value is selected.
Type
booleanDefault
truedefaultIsOpen
Description
If true, the popover will be initially opened.
Type
booleanduration
Description
The animation duration.
Type
number | Partial<Record<"exit" | "enter", number>>eventListeners
Description
If provided, determines whether the popper will reposition itself on scroll and resize of the window.
Type
type ONLY_FOR_FORMAT =
| boolean
| { scroll?: boolean | undefined; resize?: boolean | undefined }Default
trueflip
Description
If true, the popper will change its placement and flip when it's about to overflow its boundary area.
Type
booleanDefault
truegutter
Description
The distance or margin between the reference and popper.
It is used internally to create an offset modifier.
Type
UIValue<number>Default
8initialFocusRef
Description
The ref of the element that should receive focus when the popover opens.
Type
RefObject<{ focus(): void }>isLazy
Description
If true, the PopoverContent rendering will be deferred until the popover is open.
Type
booleanDefault
falseisOpen
Description
If true, the popover will be opened.
Type
booleanlazyBehavior
Description
The lazy behavior of popover's content when not visible. Only works when isLazy={true}
- unmount: The popover's content is always unmounted when not open.
- keepMounted: The popover's content initially unmounted, but stays mounted when popover is open.
Type
LazyModeDefault
'unmount'matchWidth
Description
If true, the popper will match the width of the reference at all times.
It's useful for autocomplete, date-picker and select patterns.
Type
booleanDefault
falsemodifiers
Description
Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.
Type
Partial<Modifier<string, any>>[]Docs
https://popper.js.org/docs/v2/modifiers/offset
Description
The main and cross-axis offset to displace popper element from its reference element.
Type
[number, number]onClose
Description
Callback fired when the popover closes.
Type
() => voidonOpen
Description
Callback fired when the popover opens.
Type
() => voidopenDelay
Description
The number of delay time to open.
Type
numberDefault
200placement
Description
The placement of the popper relative to its reference.
Type
UIValue<Placement>Default
'bottom'preventOverflow
Description
If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.
Type
booleanDefault
truerestoreFocus
Description
If true, focus will be returned to the element that triggers the popover when it closes.
Type
booleanDefault
truestrategy
Description
The CSS positioning strategy to use.
Type
"fixed" | "absolute"Default
'absolute'ContextMenuTriggerProps
Edit this page on GitHub