Skip to main content

Menu

Imports​

import {Menu} from 'material-expressive-react';
import {Menu} from 'material-expressive-react/menu';

Props​

PropTypeDefaultRequiredDescription
contextbooleanNoIf true, removes gaps/dividers styling for compact context menus.
defaultValuestring | string[]NoUncontrolled selection.
gapstring | numberNoGap between menu items. Sets --mer-menu-item-gap.
groupGapstring | numberNo
heightstring | numberNo
maxHeightstring | numberNo
onValueChange((value: string | string[]) => void)No
scrollbooleanNo
selectTypeenumsingleNo
sizeenumNo
valuestring | string[]NoControlled selection.
variantenumstandardNo
widthstring | numberNo

Events​

This component does not explicitly re-emit DOM events via wrapper props.

Slots​

Material Web components frequently use named slots. In React, you can pass slot="..." on children (e.g. <Icon slot="icon" />).

If you need to slot a child component that does not accept a slot prop, use the Slotted utility (see Utilities → Slotted).

Examples​

See Storybook for live examples and variants.