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';
Parameters
Name | Type | Description |
---|---|---|
listboxId | string | |
listboxRef | React.Ref<any> | |
onClose | () => void | |
open | boolean |
Return value
Name | Type | Description |
---|---|---|
contextValue | MenuUnstyledContextType | The value for the menu context. |
getListboxProps | <TOther extends EventHandlers>(otherHandlers?: TOther) => UseMenuListboxSlotProps | Resolver for the listbox component's props. |
highlightedOption | string | 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. |
menuItems | Record<string, MenuItemMetadata> | Items in the menu listbox. |
useMenuItem API
Import
import useMenuItem from '@mui/base/useMenuItem';
// or
import { useMenuItem } from '@mui/base';
Parameters
Name | Type | Description |
---|---|---|
ref* | React.Ref<any> | |
disabled | boolean | |
label | string | |
onClick | React.MouseEventHandler<any> |
Return value
Name | Type | Default | Description |
---|---|---|---|
disabled | boolean | false | If true , the component is disabled. |
focusVisible | boolean | false | 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 | false | If true , the component is being highlighted. |