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 |
|---|