Unstyled Menu
The Menu components provide your users with a list of options on temporary surfaces.
MenuItemUnstyled API
Import
import MenuItemUnstyled from '@mui/base/MenuItemUnstyled';
// or
import { MenuItemUnstyled } from '@mui/base';
Props
Props of the native component are also available.
Name | Type | Default | Description |
---|---|---|---|
component | elementType | The component used for the root node. Either a string to use a HTML element or a component. | |
disabled | bool | false | If true , the menu item will be disabled. |
label | string | 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.Slots
To learn how to customize the slot, check out the Overriding component structure guide.
Name | Default class | Default HTML tag | Description |
---|---|---|---|
root | .MuiMenuItem-root | 'li' | The component that renders the root. |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverrides
property in a custom theme.
CSS classes
These class names are useful for styling with CSS. They are applied to the root slot when specific states are triggered.
Global class | Description |
---|---|
.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} . |
MenuUnstyled API
Import
import MenuUnstyled from '@mui/base/MenuUnstyled';
// or
import { MenuUnstyled } from '@mui/base';
Props
Name | Type | Default | Description |
---|---|---|---|
actions | ref | A ref with imperative actions. It allows to select the first or last menu item. | |
anchorEl | HTML element | object | func | An HTML element, virtualElement, or a function that returns either. It's used to set the position of the popper. | |
component | elementType | The component used for the root node. Either a string to use a HTML element or a component. | |
keepMounted | bool | false | 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. |
onClose | func | Triggered when focus leaves the menu and the menu should close. | |
open | bool | false | 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.Slots
To learn how to customize the slot, check out the Overriding component structure guide.
Name | Default class | Default HTML tag | Description |
---|---|---|---|
root | .MuiMenu-root | PopperUnstyled | The 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:
- With a global class name.
- With a rule name as part of the component's
styleOverrides
property in a custom theme.
CSS classes
These class names are useful for styling with CSS. They are applied to the root slot when specific states are triggered.
Global class | Description |
---|---|
.Mui-expanded STATE | State class applied to the root `PopperUnstyled` element and the listbox `ul` element if open={true} . |