Skip to content

Menu

The Menu components provide your users with a list of options on temporary surfaces.

Demos Components API Hooks API

import useDropdown from '@mui/base/useDropdown';
// or
import { useDropdown } from '@mui/base';

Learn about the difference by reading this guide on minimizing bundle size.

defaultOpen

If true, the dropdown is initially open.

Type:

boolean

onOpenChange

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

Type:

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

open

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

Type:

boolean

contextValue

The value to be passed into the DropdownContext provider.

Type:

DropdownContextValue

open

If true, the dropdown is open.

Type:

boolean

import useMenu from '@mui/base/useMenu';
// or
import { useMenu } from '@mui/base';

Learn about the difference by reading this guide on minimizing bundle size.

id

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

Type:

string

listboxRef

The ref to the menu's listbox node.

Type:

React.Ref<Element>

onItemsChange

Callback fired when the menu items change.

Type:

(items: string[]) => void

contextValue

The value to be passed into the MenuProvider.

Type:

MenuProviderValue

dispatch

Action dispatcher for the menu component. Allows to programmatically control the menu.

Type:

(action: ListAction<string>) => void

getListboxProps

Resolver for the listbox slot's props.

Type:

<TOther extends EventHandlers>(otherHandlers?: TOther) => UseMenuListboxSlotProps

highlightedValue

The highlighted option in the menu listbox.

Type:

string | null

listboxRef

The ref to the menu's listbox node.

Type:

React.RefCallback<Element> | null

menuItems

Items in the menu listbox.

Type:

Map<string, MenuItemMetadata>

open

If true, the menu is open.

Type:

boolean

triggerElement

An element that triggers the visibility of the menu.

Type:

HTMLElement | null

import useMenuButton from '@mui/base/useMenuButton';
// or
import { useMenuButton } from '@mui/base';

Learn about the difference by reading this guide on minimizing bundle size.

disabled

If true, the component is disabled.

Type:

boolean

Default:

false

focusableWhenDisabled

If true, allows a disabled button to receive focus.

Type:

boolean

Default:

false

rootRef

The ref to the root element.

Type:

React.Ref<HTMLElement>

active

If true, the component is active (pressed).

Type:

boolean

getRootProps

Resolver for the root slot's props.

Type:

(otherHandlers?: EventHandlers) => UseMenuButtonRootSlotProps

open

Type:

boolean

rootRef

The ref to the root element.

Type:

React.RefCallback<Element> | null

import useMenuItem from '@mui/base/useMenuItem';
// or
import { useMenuItem } from '@mui/base';

Learn about the difference by reading this guide on minimizing bundle size.

rootRefRequired

Type:

React.Ref<Element>

disabled

Type:

boolean

id

Type:

string

label

Type:

string

onClick

Type:

React.MouseEventHandler<any>

disabled

If true, the component is disabled.

Type:

boolean

focusVisible

If true, the component is being focused using keyboard.

Type:

boolean

getRootProps

Resolver for the root slot's props.

Type:

<TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseMenuItemRootSlotProps<TOther>

highlighted

If true, the component is being highlighted.

Type:

boolean

index

0-based index of the item in the menu.

Type:

number

rootRef

The ref to the component's root DOM element.

Type:

React.RefCallback<Element> | null

totalItemCount

Total number of items in the menu.

Type:

number