Skip to content

Menu

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

useMenu API

Import

import useMenu from '@mui/base/useMenu';
// or
import { useMenu } from '@mui/base';
You can learn about the difference by reading this guide on minimizing bundle size.

Parameters

NameTypeDefaultDescription
defaultOpenbooleanfalse
If true, the menu will be initially open.
listboxIdstring
Id of the menu listbox.
listboxRefReact.Ref<Element>
Ref of the menu listbox.
onOpenChange(open: boolean) => void
Callback fired when the menu is opened or closed.
openboolean
If true, the menu will be open. This is the controlled equivalent of the defaultOpen parameter.

Return value

NameTypeDescription
contextValueMenuProviderValue
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.
highlightedValuestring | null
The highlighted option in the menu listbox.
listboxRefReact.RefCallback<Element> | null
The ref to the listbox DOM node.
menuItemsMap<string, MenuItemMetadata>
Items in the menu listbox.
openboolean
If true, the menu is open.


useMenuItem API

Import

import useMenuItem from '@mui/base/useMenuItem';
// or
import { useMenuItem } from '@mui/base';
You can learn about the difference by reading this guide on minimizing bundle size.

Parameters

NameTypeDescription
rootRef*React.Ref<Element>
disabledboolean
idstring
labelstring
onClickReact.MouseEventHandler<any>

Return value

NameTypeDescription
disabledboolean
If true, the component is disabled.
focusVisibleboolean
If true, the component is being focused using keyboard.
getRootProps<TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseMenuItemRootSlotProps<TOther>
Resolver for the root slot's props.
highlightedboolean
If true, the component is being highlighted.
indexnumber
0-based index of the item in the menu.
rootRefReact.RefCallback<Element> | null
The ref to the component's root DOM element.
totalItemCountnumber
Total number of items in the menu.