Skip to content

Unstyled Menu

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

import MenuItemUnstyled from '@mui/base/MenuItemUnstyled';
// or
import { MenuItemUnstyled } 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
componentelementType
The component used for the root node. Either a string to use a HTML element or a component.
disabledboolfalse
If true, the menu item will be disabled.
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:


import MenuUnstyled from '@mui/base/MenuUnstyled';
// or
import { MenuUnstyled } 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.
componentelementType
The component used for the root node. Either a string to use a HTML element or a component.
keepMountedboolfalse
Always keep the menu in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Menu.
onClosefunc
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-rootPopperUnstyledThe 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: