Skip to content
+

Menu

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

Component demosComponents APIHooks API

useDropdown API

Import

import { useDropdown } from '@mui/base/useDropdown';
// or
import { useDropdown } from '@mui/base';
Learn about the difference by reading this guide on minimizing bundle size.

Parameters

defaultOpen

If true, the dropdown is initially open.

Type:boolean

onOpenChange

Callback fired when the component requests to be opened or closed.

Type:(event: React.MouseEvent | React.KeyboardEvent | React.FocusEvent | null, open: boolean) => void

open

Allows to control whether the dropdown is open. This is a controlled counterpart of defaultOpen.

Type:boolean

Return value

contextValue

The value to be passed into the DropdownContext provider.

Type:DropdownContextValue

open

If true, the dropdown is open.

Type:boolean


useMenu API

Import

import { useMenu } from '@mui/base/useMenu';
// or
import { useMenu } from '@mui/base';
Learn about the difference by reading this guide on minimizing bundle size.

Parameters

disabledItemsFocusable

If true, it will be possible to highlight disabled items.

Type:boolean

Default:true

disableListWrap

If true, the highlight will not wrap around the list if arrow keys are used.

Type:boolean

Default:false

id

The id of the menu. If not provided, it will be generated.

Type:string

listboxRef

The ref to the menu's listbox node.

Type:React.Ref<Element>

onItemsChange

Callback fired when the menu items change.

Type:(items: string[]) => void

Return value

contextValue

The value to be passed into the MenuProvider.

Type:MenuProviderValue

dispatch

Action dispatcher for the menu component. Allows to programmatically control the menu.

Type:(action: ListAction<string>) => void

getListboxProps

Resolver for the listbox slot's props.

Type:<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseMenuListboxSlotProps

highlightedValue

The highlighted option in the menu listbox.

Type:string | null

listboxRef

The ref to the menu's listbox node.

Type:React.RefCallback<Element> | null

menuItems

Items in the menu listbox.

Type:Map<string, MenuItemMetadata>

open

If true, the menu is open.

Type:boolean

triggerElement

An element that triggers the visibility of the menu.

Type:HTMLElement | null


useMenuButton API

Import

import { useMenuButton } from '@mui/base/useMenuButton';
// or
import { useMenuButton } from '@mui/base';
Learn about the difference by reading this guide on minimizing bundle size.

Parameters

disabled

If true, the component is disabled.

Type:boolean

Default:false

focusableWhenDisabled

If true, allows a disabled button to receive focus.

Type:boolean

Default:false

rootRef

The ref to the root element.

Type:React.Ref<HTMLElement>

Return value

active

If true, the component is active (pressed).

Type:boolean

getRootProps

Resolver for the root slot's props.

Type:<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseMenuButtonRootSlotProps<ExternalProps>

open

Type:boolean

rootRef

The ref to the root element.

Type:React.RefCallback<Element> | null


useMenuItem API

Import

import { useMenuItem } from '@mui/base/useMenuItem';
// or
import { useMenuItem } from '@mui/base';
Learn about the difference by reading this guide on minimizing bundle size.

Parameters

rootRefRequired

Type:React.Ref<Element>

disabled

Type:boolean

id

Type:string

label

Type:string

onClick

Type:React.MouseEventHandler<any>

Return value

disabled

If true, the component is disabled.

Type:boolean

focusVisible

If true, the component is being focused using keyboard.

Type:boolean

getRootProps

Resolver for the root slot's props.

Type:<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseMenuItemRootSlotProps<ExternalProps>

highlighted

If true, the component is being highlighted.

Type:boolean

index

0-based index of the item in the menu.

Type:number

rootRef

The ref to the component's root DOM element.

Type:React.RefCallback<Element> | null

totalItemCount

Total number of items in the menu.

Type:number


useMenuItemContextStabilizer API

Import

import { useMenuItemContextStabilizer } from '@mui/base/useMenuItem';
// or
import { useMenuItemContextStabilizer } from '@mui/base';
Learn about the difference by reading this guide on minimizing bundle size.This hook does not accept any input parameters.

Return value