Skip to content

Menu

The Menu component provide end users with a list of options on temporary surfaces.

import * as Menu from '@base_ui/react/Menu';
const MenuArrow = Menu.Arrow;

Props of the native component are also available.

Name	Type	Default	Description
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
hideWhenUncentered	bool	false	If `true`, the arrow is hidden when it can't point to the center of the anchor element.
render	element \| func	-	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use MenuArrow to change the default props of this component with the theme.

import * as Menu from '@base_ui/react/Menu';
const MenuItem = Menu.Item;

Props of the native component are also available.

Name	Type	Default	Description
closeOnClick	bool	true	If `true`, the menu will close when the menu item is clicked.
disabled	bool	false	If `true`, the menu item will be disabled.
id	string	-	The id of the menu item.
label	string	-	A text representation of the menu item's content. Used for keyboard text navigation matching.
onClick	func	-	The click handler for the menu item.

The ref is forwarded to the root element.

Theme default props

You can use MenuItem to change the default props of this component with the theme.

import * as Menu from '@base_ui/react/Menu';
const MenuPopup = Menu.Popup;

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
id	string	The id of the popup element.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use MenuPopup to change the default props of this component with the theme.

import * as Menu from '@base_ui/react/Menu';
const MenuPositioner = Menu.Positioner;

Props of the native component are also available.

Name	Type	Default	Description
alignment	'center' \| 'end' \| 'start'	'center'	The alignment of the Menu element to the anchor element along its cross axis.
alignmentOffset	number	0	The offset of the Menu element along its alignment axis.
anchor	HTML element \| object \| func	-	The anchor element to which the Menu popup will be placed at.
arrowPadding	number	5	Determines the padding between the arrow and the Menu popup's edges. Useful when the popover popup has rounded corners via `border-radius`.
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
collisionBoundary	HTML element \| Array<HTML element> \| string \| { height?: number, width?: number, x?: number, y?: number }	'clippingAncestors'	The boundary that the Menu element should be constrained to.
collisionPadding	number \| { bottom?: number, left?: number, right?: number, top?: number }	5	The padding of the collision boundary.
container	HTML element \| func	-	The container element to which the Menu popup will be appended to.
hideWhenDetached	bool	false	If `true`, the Menu will be hidden if it is detached from its anchor element due to differing clipping contexts.
keepMounted	bool	false	Whether the menu popup remains mounted in the DOM while closed.
positionStrategy	'absolute' \| 'fixed'	'absolute'	The CSS position strategy for positioning the Menu popup element.
render	element \| func	-	A function to customize rendering of the component.
side	'bottom' \| 'left' \| 'right' \| 'top'	'bottom'	The side of the anchor element that the Menu element should align to.
sideOffset	number	0	The gap between the anchor element and the Menu element.
sticky	bool	false	If `true`, allow the Menu to remain in stuck view while the anchor element is scrolled out of view.

The ref is forwarded to the root element.

Theme default props

You can use MenuPositioner to change the default props of this component with the theme.

import * as Menu from '@base_ui/react/Menu';
const MenuRoot = Menu.Root;

Props of the native component are also available.

Name	Type	Default	Description
animated	bool	true	If `true`, the Menu supports CSS-based animations and transitions. It is kept in the DOM until the animation completes.
closeParentOnEsc	bool	true	Determines if pressing the Esc key closes the parent menus. This is only applicable for nested menus. If set to `false` pressing Esc closes only the current menu.
defaultOpen	bool	false	If `true`, the Menu is initially open.
delay	number	100	The delay in milliseconds until the menu popup is opened when `openOnHover` is `true`.
dir	'ltr' \| 'rtl'	'ltr'	The direction of the Menu (left-to-right or right-to-left).
disabled	bool	false	If `true`, the Menu is disabled.
loop	bool	true	If `true`, using keyboard navigation will wrap focus to the other end of the list once the end is reached.
onOpenChange	func	-	Callback fired when the component requests to be opened or closed.
open	bool	-	Allows to control whether the dropdown is open. This is a controlled counterpart of `defaultOpen`.
openOnHover	bool	nested	Whether the menu popup opens when the trigger is hovered after the provided `delay`.
orientation	'horizontal' \| 'vertical'	'vertical'	The orientation of the Menu (horizontal or vertical).

The component cannot hold a ref.

import * as Menu from '@base_ui/react/Menu';
const MenuTrigger = Menu.Trigger;

Props of the native component are also available.

Name	Type	Default	Description
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
disabled	bool	false	If `true`, the component is disabled.
focusableWhenDisabled	bool	false	If `true`, allows a disabled button to receive focus.
label	string	-	Label of the button
render	element \| func	-	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use MenuTrigger to change the default props of this component with the theme.

SubmenuTrigger API

Import

import { SubmenuTrigger } from '@base_ui/react/Menu';

Props

Name	Type	Default	Description
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
disabled	bool	false	If `true`, the menu item will be disabled.
disableFocusOnHover	bool	false	If `true`, the menu item won't receive focus when the mouse moves over it.
label	string	-	A text representation of the menu item's content. Used for keyboard text navigation matching.
render	element \| func	-	A function to customize rendering of the component.

The component cannot hold a ref.