Skip to content

Menu

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

import Menu from '@mui/base/Menu';
// or
import { Menu } from '@mui/base';
You can learn about the difference by reading this guide on minimizing bundle size.

NameTypeDefaultDescription
actionsref
A ref with imperative actions. It allows to select the first or last menu item.
anchorElHTML element
| object
| func
An HTML element, virtualElement, or a function that returns either. It's used to set the position of the popper.
onOpenChangefunc
Triggered when focus leaves the menu and the menu should close.
openboolfalse
Controls whether the menu is displayed.
slotProps{ listbox?: func
| object, root?: func
| object }
{}
The props used for each slot inside the Menu.
slots{ listbox?: elementType, root?: elementType }{}
The components used for each slot inside the Menu. Either a string to use a HTML element or a component. See Slots API below for more details.

The ref is forwarded to the root element.

To learn how to customize the slot, check out the Overriding component structure guide.

NameDefault classDefault HTML tagDescription
root.MuiMenu-rootPopperThe component that renders the root.
listbox.MuiMenu-listbox'ul'The component that renders the listbox.

You can override the style of the component using one of these customization options:

These class names are useful for styling with CSS. They are applied to the root slot when specific states are triggered.

Global classDescription
.Mui-expanded
STATE
State class applied to the root `Popper` element and the listbox `ul` element if open={true}.


import MenuItem from '@mui/base/MenuItem';
// or
import { MenuItem } from '@mui/base';
You can learn about the difference by reading this guide on minimizing bundle size.

Props of the native component are also available.

NameTypeDefaultDescription
labelstring
A text representation of the menu item's content. Used for keyboard text navigation matching.
slotProps{ root?: func
| object }
{}
The props used for each slot inside the MenuItem.
slots{ root?: elementType }{}
The components used for each slot inside the MenuItem. Either a string to use a HTML element or a component. See Slots API below for more details.

The ref is forwarded to the root element.

To learn how to customize the slot, check out the Overriding component structure guide.

NameDefault classDefault HTML tagDescription
root.MuiMenuItem-root'li'The component that renders the root.

You can override the style of the component using one of these customization options:

These class names are useful for styling with CSS. They are applied to the root slot when specific states are triggered.

Global classDescription
.Mui-disabled
STATE
State class applied to the root `button` element if disabled={true}.
.Mui-focusVisible
STATE
State class applied to the root `button` element if focusVisible={true}.