Skip to Content
Docs🏗️ ⏐ ComponentsLayersMenu

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

NameTypeDefault
appendToBodyboolean

Whether to append the menu to the body or not.

true
autofocusboolean

Autofocus the menu on open or not.

true
childrenany

The menu contents.

classNamestring

CSS class applied to menu element.

closeOnBodyClickboolean

Close the menu on click or not.

true
closeOnEscapeboolean

Close the menu on escape.

true
placementPlacement

floating-ui placement type.

'bottom-start'
referenceany

Reference element for the menu position.

styleCSSProperties

CSS Properties for the menu.

openboolean

Whether to show the menu or not.

false
animatedboolean

Deprecated: Use animation configuration instead. Whether to animate the menu.

true
animationMotionNodeAnimationOptions

Animation configuration for the collapse.

maxHeightstring

Max height of the menu.

'max-height: calc(100vh - 48px)'
modifiersModifiers

floating-ui Position modifiers.

autoWidthboolean

Whether the menu should be the same width as the reference element

minWidthnumber

Min width of the menu.

maxWidthnumber

Max width of the menu.

onClose(event: OverlayEvent) => void

Menu was closed.

onMouseEnter(event: any) => void

Mouse enter event.

onMouseLeave(event: any) => void

Mouse leave event.

themeMenuTheme

Theme for the Menu.

Last updated on
DrawerNotification