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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

NameTypeDefaultDescription
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

NameTypeDefaultDescription