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
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 |
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> |