Menu
The Dropdown Menu components provide end users with a list of options on temporary surfaces.
Dropdown API
Import
import { Dropdown } from '@mui/base/Dropdown';
// or
import { Dropdown } from '@mui/base';| Name | Type | Default | Description |
|---|---|---|---|
| defaultOpen | bool | If | |
| onOpenChange | func | Callback fired when the component requests to be opened or closed. | |
| open | bool | Allows to control whether the dropdown is open. This is a controlled counterpart of |
Menu API
Import
import { Menu } from '@mui/base/Menu';
// or
import { Menu } from '@mui/base';Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| actions | ref | A ref with imperative actions that can be performed on the menu. | |
| anchor | HTML element | object | func | The element based on which the menu is positioned. | |
| onItemsChange | func | Function called when the items displayed in the menu change. | |
| 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. |
ref is forwarded to the root element.To learn how to customize the slot, check out the Overriding component structure guide.
| Slot name | Class name | Default component | Description |
|---|---|---|---|
| root | .base-Menu-root | 'div' | The component that renders the popup element. |
| listbox | .base-Menu-listbox | 'ul' | The component that renders the listbox. |
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
| Class name | Description |
|---|---|
| .base--expanded | State class applied to the root element if open={true}. |
MenuButton API
Import
import { MenuButton } from '@mui/base/MenuButton';
// or
import { MenuButton } from '@mui/base';Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | Class name applied to the root element. | |
| disabled | bool | false | If |
| focusableWhenDisabled | bool | false | If |
| label | string | Label of the button | |
| slotProps | { root?: func | object } | {} | The components used for each slot inside the MenuButton. Either a string to use a HTML element or a component. |
| slots | { root?: elementType } | {} | The props used for each slot inside the MenuButton. See Slots API below for more details. |
ref is forwarded to the root element.To learn how to customize the slot, check out the Overriding component structure guide.
| Slot name | Class name | Default component | Description |
|---|---|---|---|
| root | .base-MenuButton-root | 'button' | The component that renders the root. |
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
| Class name | Description |
|---|---|
| .base--active | State class applied to the root element if active={true}. |
| .base--disabled | State class applied to the root element if disabled={true}. |
| .base--expanded | State class applied to the root element if the associated menu is open. |
MenuItem API
Import
import { MenuItem } from '@mui/base/MenuItem';
// or
import { MenuItem } from '@mui/base';Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| disabled | bool | false | If |
| disableFocusOnHover | bool | false | If |
| 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. |
ref is forwarded to the root element.To learn how to customize the slot, check out the Overriding component structure guide.
| Slot name | Class name | Default component | Description |
|---|---|---|---|
| root | .base-MenuItem-root | 'li' | The component that renders the root. |
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
| Class name | Description |
|---|---|
| .base--disabled | State class applied to the root button element if disabled={true}. |
| .base--focusVisible | State class applied to the root button element if focusVisible={true}. |