Menu2 API

API reference docs for the React Menu2 component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Menu v2

Import

import Menu from '@mui/material/Unstable_Menu2';

Controls a menu without rendering a DOM element. Use MuiMenu2.defaultProps to set behavior defaults in the theme.

Props

Name	Type	Default	Description
actionsRef	{ current?: { close: func, unmount: func } }	-	A ref to imperative actions. `unmount`: Ends the closing phase of the menu after an externally controlled closing animation finishes. Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the menu completes closing on its own. Whether it leaves the DOM is decided by `keepMounted` on the portal. `close`: Closes the menu imperatively when called.
children	node	-	The menu trigger and popup.
defaultOpen	bool	false	Whether the menu is initially open. To render a controlled menu, use the `open` prop instead.
disabled	bool	false	Whether the component should ignore user interaction.
highlightItemOnHover	bool	true	Whether moving the pointer over items should highlight them. Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.
loopFocus	bool	true	Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
modal	bool	true	Determines if the menu enters a modal state when open. `true`: user interaction is limited to the menu: document page scroll is locked and pointer interactions on outside elements are disabled. `false`: user interaction with the rest of the document is allowed. On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior. Nested menus ignore this prop, and menus opened by hover are never modal.
onOpenChange	func	-	Event handler called when the menu is opened or closed. Signature:`function(open: boolean, eventDetails: object) => void` `open` The new open state. `eventDetails` The reason for the change and the native event.
onOpenChangeComplete	func	-	Event handler called after the opening or closing animation completes. Signature:`function(open: boolean) => void` `open` Whether the menu is open.
open	bool	-	Whether the menu is currently open.

The component cannot hold a ref.

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.