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

componentName

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

Type:string

Default:'useDropdown'

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

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

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