Menu
The Dropdown Menu components provide end users with a list of options on temporary surfaces.
useDropdown API
Import
import { useDropdown } from '@mui/base/useDropdown';
// or
import { useDropdown } from '@mui/base';Learn about the difference by reading this guide on minimizing bundle size.
| Name | Type | Default | Description | 
|---|---|---|---|
| componentName | string | 'useDropdown' | The name of the component using useDropdown. For debugging purposes. | 
| defaultOpen | boolean | - | If  | 
| onOpenChange | (event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null, open: boolean) => void | - | Callback fired when the component requests to be opened or closed. | 
| open | boolean | - | Allows to control whether the dropdown is open. This is a controlled counterpart of  | 
| Name | Type | Description | 
|---|---|---|
| contextValue | DropdownContextValue | The value to be passed into the DropdownContext provider. | 
| open | boolean | If  | 
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.
| Name | Type | Default | Description | 
|---|---|---|---|
| autoFocus | boolean | true | If  | 
| componentName | string | 'useMenu' | The name of the component using useMenu. For debugging purposes. | 
| disabledItemsFocusable | boolean | true | If  | 
| disableListWrap | boolean | false | If  | 
| id | string | - | The id of the menu. If not provided, it will be generated. | 
| listboxRef | React.Ref<Element> | - | The ref to the menu's listbox node. | 
| onItemsChange | (items: string[]) => void | - | Callback fired when the menu items change. | 
| 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 | <ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseMenuListboxSlotProps | Resolver for the listbox slot's props. | 
| highlightedValue | string | null | The highlighted option in the menu listbox. | 
| listboxRef | React.RefCallback<Element> | null | The ref to the menu's listbox node. | 
| menuItems | Map<string, MenuItemMetadata> | Items in the menu listbox. | 
| open | boolean | If  | 
| triggerElement | HTMLElement | null | An element that triggers the visibility of the menu. | 
useMenuButton API
Import
import { useMenuButton } from '@mui/base/useMenuButton';
// or
import { useMenuButton } from '@mui/base';Learn about the difference by reading this guide on minimizing bundle size.
| Name | Type | Default | Description | 
|---|---|---|---|
| disabled | boolean | false | If  | 
| focusableWhenDisabled | boolean | false | If  | 
| rootRef | React.Ref<HTMLElement> | - | The ref to the root element. | 
| Name | Type | Description | 
|---|---|---|
| active | boolean | If  | 
| getRootProps | <ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseMenuButtonRootSlotProps<ExternalProps> | Resolver for the root slot's props. | 
| open | boolean | |
| rootRef | React.RefCallback<Element> | null | The ref to the root element. | 
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.
| Name | Type | Default | Description | 
|---|---|---|---|
| rootRef* | React.Ref<Element> | - | |
| disabled | boolean | - | |
| disableFocusOnHover | boolean | false | If  | 
| id | string | - | |
| label | string | - | |
| onClick | React.MouseEventHandler<any> | - | 
| Name | Type | Description | 
|---|---|---|
| disabled | boolean | If  | 
| focusVisible | boolean | If  | 
| getRootProps | <ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseMenuItemRootSlotProps<ExternalProps> | Resolver for the root slot's props. | 
| highlighted | boolean | If  | 
| 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. | 
useMenuItemContextStabilizer API
Import
import { useMenuItemContextStabilizer } from '@mui/base/useMenuItem';
// or
import { useMenuItemContextStabilizer } from '@mui/base';Learn about the difference by reading this guide on minimizing bundle size.
This hook does not accept any input parameters.| Name | Type | Description | 
|---|