Skip to content
+

Menu

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

  • Feedback
  • Bundle size
  • WAI-ARIA
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


Edit this page

Was this page helpful?


DrawerPagination

•

Blog

•

Store