Menu2Submenu API

API reference docs for the React Menu2Submenu 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 MenuSubmenu from '@mui/material/Unstable_Menu2Submenu';

Controls a submenu without rendering a DOM element. Use MuiMenu2Submenu.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 submenu trigger and popup.
closeParentOnEsc	bool	false	When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu.
defaultOpen	bool	false	Whether the menu is initially open. To render a controlled menu, use the `open` prop instead.
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.
onOpenChange	func	-	Event handler called when the submenu 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 submenu 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.