Skip to content

Unstyled 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

NameTypeDescription
listboxIdstring
listboxRefReact.Ref<any>
onClose() => void
openboolean

Return value

NameTypeDescription
contextValueMenuUnstyledContextType
The value for the menu context.
getListboxProps<TOther extends EventHandlers>(otherHandlers?: TOther) => UseMenuListboxSlotProps
Resolver for the listbox component's props.
highlightedOptionstring | null
The highlighted option in the menu listbox.
highlightFirstItem() => void
Callback for highlighting the first item in the menu listbox.
highlightLastItem() => void
Callback for highlighting the last item in the menu listbox.
menuItemsRecord<string, MenuItemMetadata>
Items in the menu listbox.


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
ref*React.Ref<any>
disabledboolean
labelstring
onClickReact.MouseEventHandler<any>

Return value

NameTypeDefaultDescription
disabledbooleanfalse
If true, the component is disabled.
focusVisiblebooleanfalse
If true, the component is being focused using keyboard.
getRootProps<TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseMenuItemRootSlotProps<TOther>
Resolver for the root slot's props.
highlightedbooleanfalse
If true, the component is being highlighted.