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