Skip to content

Menu

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

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.

disabledItemsFocusable

disableListWrap

id

listboxRef

onItemsChange

contextValue

dispatch

getListboxProps

highlightedValue

listboxRef

menuItems

open

triggerElement

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

focusableWhenDisabled

rootRef

active

getRootProps

open

rootRef

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

disabled

id

label

onClick

disabled

focusVisible

getRootProps

highlighted

index

rootRef

totalItemCount