Skip to content

Menu

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

Component demos Components API Hooks API

import { useDropdown } from '@mui/base/useDropdown';
// or
import { useDropdown } from '@mui/base';

Learn about the difference by reading this guide on minimizing bundle size.

import { useMenu } from '@mui/base/useMenu';
// or
import { useMenu } from '@mui/base';

Learn about the difference by reading this guide on minimizing bundle size.

autoFocus

If true (Default) will focus the highligted item. If you set this prop to false the focus will not be moved inside the Menu component. This has severe accessibility implications and should only be considered if you manage focus otherwise.

Type:boolean

Default:true

componentName

The name of the component using useMenu. For debugging purposes.

Type:string

Default:'useMenu'

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

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

import { useMenuButton } from '@mui/base/useMenuButton';
// or
import { useMenuButton } from '@mui/base';

Learn about the difference by reading this guide on minimizing bundle size.

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>

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

import { useMenuItem } from '@mui/base/useMenuItem';
// or
import { useMenuItem } from '@mui/base';

Learn about the difference by reading this guide on minimizing bundle size.

rootRefRequired

Type:React.Ref<Element>

disabled

Type:boolean

id

Type:string

label

Type:string

onClick

Type:React.MouseEventHandler<any>

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

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.