Docs
πŸ—οΈ ⏐ Components
Layers
Menu

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

PropDescriptionDefault
appendToBodyWhether to append the menu to the body or not.
boolean
true
autofocusAutofocus the menu on open or not.
boolean
true
children *The menu contents.
any
classNameCSS class applied to menu element.
string
closeOnBodyClickClose the menu on click or not.
boolean
true
closeOnEscapeClose the menu on escape.
boolean
true
placementfloating-ui placement type.
Placement
bottom-start
referenceReference element for the menu position.
any
styleCSS Properties for the menu.
CSSProperties
openWhether to show the menu or not.
boolean
false
maxHeightMax height of the menu.
string
max-height: calc(100vh - 48px)
modifiersfloating-ui Position modifiers.
Modifiers
autoWidthWhether the menu should be the same width as the reference element
boolean
minWidthMin width of the menu.
number
maxWidthMax width of the menu.
number
onCloseMenu was closed.
(event: OverlayEvent) => void
onMouseEnterMouse enter event.
(event: any) => void
onMouseLeaveMouse leave event.
(event: any) => void
themeTheme for the Menu.
MenuTheme
refReference to the menu element.
LegacyRef<HTMLDivElement>

Hook