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';
Parameters
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<Element> | Ref of the menu listbox. | |
onItemsChange | (items: string[]) => void | Callback fired when the menu items change. | |
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. |
Return value
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. |
listboxRef | React.RefCallback<Element> | null | The ref to the listbox DOM node. |
menuItems | Map<string, MenuItemMetadata> | Items in the menu listbox. |
open | boolean | If true , the menu is open. |
useMenuItem API
Import
import useMenuItem from '@mui/base/useMenuItem';
// or
import { useMenuItem } from '@mui/base';
Parameters
Name | Type | Description |
---|---|---|
rootRef* | React.Ref<Element> | |
disabled | boolean | |
id | string | |
label | string | |
onClick | React.MouseEventHandler<any> |
Return value
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. |
rootRef | React.RefCallback<Element> | null | The ref to the component's root DOM element. |
totalItemCount | number | Total number of items in the menu. |