Unstyled Menu

The Menu components provide your users with a list of options on temporary surfaces.

import useMenu from '@mui/base/useMenu';
// or
import { useMenu } from '@mui/base';

Name	Type	Default	Description
defaultOpen	boolean	false	If `true`, the menu will be initially open.
listboxId	string		Id of the menu listbox.
listboxRef	React.Ref<any>		Ref of the menu listbox.
onOpenChange	(open: boolean) => void		Callback fired when the menu is opened or closed.
open	boolean		If `true`, the menu will be open. This is the controlled equivalent of the `defaultOpen` parameter.

Name	Type	Description
contextValue	MenuProviderValue	The value to be passed into the MenuProvider.
dispatch	(action: ListAction<string>) => void	Action dispatcher for the menu component. Allows to programmatically control the menu.
getListboxProps	<TOther extends EventHandlers>(otherHandlers?: TOther) => UseMenuListboxSlotProps	Resolver for the listbox component's props.
highlightedValue	string \| null	The highlighted option in the menu listbox.
menuItems	Map<string, MenuItemMetadata>	Items in the menu listbox.
open	boolean	If `true`, the menu is open.

import useMenuItem from '@mui/base/useMenuItem';
// or
import { useMenuItem } from '@mui/base';

Name	Type	Description
ref^*	React.Ref<any>
disabled	boolean
id	string
label	string
onClick	React.MouseEventHandler<any>

Name	Type	Description
disabled	boolean	If `true`, the component is disabled.
focusVisible	boolean	If `true`, the component is being focused using keyboard.
getRootProps	<TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseMenuItemRootSlotProps<TOther>	Resolver for the root slot's props.
highlighted	boolean	If `true`, the component is being highlighted.
index	number	0-based index of the item in the menu.
ref	((instance: unknown) => void) \| null	The ref to the component's root DOM element.
totalItemCount	number	Total number of items in the menu.

useMenu API