Skip to content
Edit this page
+

Menu

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

DemosComponents APIHooks API

useMenu API

Import

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

Parameters

defaultOpen

If true, the menu will be initially open.

Type:

boolean

Default:

false
listboxId

Id of the menu listbox.

Type:

string
listboxRef

Ref of the menu listbox.

Type:

React.Ref<Element>
onItemsChange

Callback fired when the menu items change.

Type:

(items: string[]) => void
onOpenChange

Callback fired when the menu is opened or closed.

Type:

(open: boolean) => void
open

If true, the menu will be open. This is the controlled equivalent of the defaultOpen parameter.

Type:

boolean

Return value

contextValue

The value to be passed into the MenuProvider.

Type:

MenuProviderValue
dispatch

Action dispatcher for the menu component. Allows to programmatically control the menu.

Type:

(action: ListAction<string>) => void
getListboxProps

Resolver for the listbox component's props.

Type:

<TOther extends EventHandlers>(otherHandlers?: TOther) => UseMenuListboxSlotProps
highlightedValue

The highlighted option in the menu listbox.

Type:

string | null
listboxRef

The ref to the listbox DOM node.

Type:

React.RefCallback<Element> | null
menuItems

Items in the menu listbox.

Type:

Map<string, MenuItemMetadata>
open

If true, the menu is open.

Type:

boolean

useMenuItem API

Import

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

Parameters

rootRefRequired

Type:

React.Ref<Element>
disabled

Type:

boolean
id

Type:

string
label

Type:

string
onClick

Type:

React.MouseEventHandler<any>

Return value

disabled

If true, the component is disabled.

Type:

boolean
focusVisible

If true, the component is being focused using keyboard.

Type:

boolean
getRootProps

Resolver for the root slot's props.

Type:

<TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseMenuItemRootSlotProps<TOther>
highlighted

If true, the component is being highlighted.

Type:

boolean
index

0-based index of the item in the menu.

Type:

number
rootRef

The ref to the component's root DOM element.

Type:

React.RefCallback<Element> | null
totalItemCount

Total number of items in the menu.

Type:

number