Skip to content
+

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.

Parameters

NameTypeDefaultDescription
componentNamestring'useDropdown'

The name of the component using useDropdown. For debugging purposes.

defaultOpenboolean-

If true, the dropdown is initially open.

onOpenChange(event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null, open: boolean) => void-

Callback fired when the component requests to be opened or closed.

openboolean-

Allows to control whether the dropdown is open. This is a controlled counterpart of defaultOpen.

Return value

NameTypeDescription
contextValueDropdownContextValue

The value to be passed into the DropdownContext provider.

openboolean

If true, the dropdown is open.


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.

Parameters

NameTypeDefaultDescription
autoFocusbooleantrue

If true (Default) will focus the highligted item. If you set this prop to false the focus will not be moved inside the Menu component. This has severe accessibility implications and should only be considered if you manage focus otherwise.

componentNamestring'useMenu'

The name of the component using useMenu. For debugging purposes.

disabledItemsFocusablebooleantrue

If true, it will be possible to highlight disabled items.

disableListWrapbooleanfalse

If true, the highlight will not wrap around the list if arrow keys are used.

idstring-

The id of the menu. If not provided, it will be generated.

listboxRefReact.Ref<Element>-

The ref to the menu's listbox node.

onItemsChange(items: string[]) => void-

Callback fired when the menu items change.

Return value

NameTypeDescription
contextValueMenuProviderValue

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.

highlightedValuestring | null

The highlighted option in the menu listbox.

listboxRefReact.RefCallback<Element> | null

The ref to the menu's listbox node.

menuItemsMap<string, MenuItemMetadata>

Items in the menu listbox.

openboolean

If true, the menu is open.

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

Parameters

NameTypeDefaultDescription
disabledbooleanfalse

If true, the component is disabled.

focusableWhenDisabledbooleanfalse

If true, allows a disabled button to receive focus.

rootRefReact.Ref<HTMLElement>-

The ref to the root element.

Return value

NameTypeDescription
activeboolean

If true, the component is active (pressed).

getRootProps<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseMenuButtonRootSlotProps<ExternalProps>

Resolver for the root slot's props.

openboolean
rootRefReact.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.

Parameters

NameTypeDefaultDescription
rootRef*React.Ref<Element>-
disabledboolean-
disableFocusOnHoverbooleanfalse

If true, the menu item won't receive focus when the mouse moves over it.

idstring-
labelstring-
onClickReact.MouseEventHandler<any>-

Return value

NameTypeDescription
disabledboolean

If true, the component is disabled.

focusVisibleboolean

If true, the component is being focused using keyboard.

getRootProps<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseMenuItemRootSlotProps<ExternalProps>

Resolver for the root slot's props.

highlightedboolean

If true, the component is being highlighted.

indexnumber

0-based index of the item in the menu.

rootRefReact.RefCallback<Element> | null

The ref to the component's root DOM element.

totalItemCountnumber

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.

Return value

NameTypeDescription