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.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.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.