Menu
The Menu component offers a collection of actions that users can perform in a list format. The typical usecases are navigation menues, table row selection menu etc.
Examples
Basic example
Nested menu items
Custom Animation
Define custom animations for the menu, using the animation, animationViewChange props:
Learn more about how to customize the animations in the Custom Animations section.
API
| Prop | Description | Default |
|---|---|---|
appendToBody | Whether to append the menu to the body or not.boolean | true |
autofocus | Autofocus the menu on open or not.boolean | true |
children * | The menu contents.any | |
className | CSS class applied to menu element.string | |
closeOnBodyClick | Close the menu on click or not.boolean | true |
closeOnEscape | Close the menu on escape.boolean | true |
placement | floating-ui placement type.Placement | bottom-start |
reference | Reference element for the menu position.any | |
style | CSS Properties for the menu.CSSProperties | |
open | Whether to show the menu or not.boolean | false |
animated | @deprecated Use animation configuration instead.
Whether to animate the menu.boolean | true |
animation | Animation configuration for the collapse.MotionNodeAnimationOptions | |
maxHeight | Max height of the menu.string | max-height: calc(100vh - 48px) |
modifiers | floating-ui Position modifiers.Modifiers | |
autoWidth | Whether the menu should be the same width as the reference elementboolean | |
minWidth | Min width of the menu.number | |
maxWidth | Max width of the menu.number | |
onClose | Menu was closed.(event: OverlayEvent) => void | |
onMouseEnter | Mouse enter event.(event: any) => void | |
onMouseLeave | Mouse leave event.(event: any) => void | |
theme | Theme for the Menu.MenuTheme | |
ref | Reference to the menu element.LegacyRef<HTMLDivElement> |
Last updated on