Menu

Menu supports dropdown, context, submenu, and object-driven item rendering while keeping keyboard and selection behavior inside the component set.

Basic menu

Dropdown and submenus

---

Actions

Selected: None

Context Menu

Right click here for context menu

Selected: None

Selection

Single and multiple values

Bind Menu v-model and give each selectable MenuItem a unique value. A single value selects one row; with multiple, the model is an array. Menu derives each row's checked state and its menuitemradio or menuitemcheckbox role. Do not also maintain a per-row checked model or toggle the value in a click handler.

Use Radio presentation for mutually exclusive choices and CheckBox presentation for independent choices. Pass checked and disabled from the row's slot. Set :close-on-select="false" to keep the menu open for repeated selections.

Sort by: name

Visible columns: size

Consumer-owned state

For an option backed by an existing boolean, omit value: set role="menuitemcheckbox", bind checked, and update the state in the row's click handler. For a consumer-owned single-choice group, use role="menuitemradio", derive each row's checked from the shared value, and assign that value on activation.

Interaction and presentation

The MenuItem owns focus, activation, accessible state, and disabled behavior. Set disabled on the row. Presentation controls render no native input or additional focus target; they only display the slot state. selected controls row emphasis and is not a substitute for checked on manually controlled checkbox or radio items.

Up/Down move between enabled rows. Enter or Space activates the focused row; a checkbox toggles, while a radio selects its value. Escape closes the menu. Submenus use Right to enter and Left to return.

Presentation CheckBox and Radio reserve only their visible box or circle. Their standalone target-size tokens do not add space inside the menu. Row size, density, and menu padding tokens still control row spacing; larger content can grow the row.

Other compositions

Embedded Select

Select options close the Select menu without closing the containing Menu.

Preferences

Coffeearrow_drop_down

Coffee

---

Coffee: Espresso

Action: None

Declarative Items

Danger zone

Links

Render the MenuItem itself as the interactive link. Do not nest <a> inside MenuItem, because that creates invalid interactive markup.

open_in_new Native link Use href on MenuItem instead of nesting an a tag.help Help center Link items keep the same menu closing and keyboard behavior.

If you are using Vue Router, keep MenuItem as the rendered anchor and let RouterLink provide the navigation state through its custom slot:

<RouterLink custom to="/settings" v-slot="{ href, navigate }">
  <MenuItem :href="href" @click="navigate">
    Settings
  </MenuItem>
</RouterLink>

Appearance

Row sizes

Set size on Menu for all rows, on MenuItem for one row, or on MenuSubMenu for a branch. Declarative item and submenu entries also accept size. Select/Combobox menus inherit the shared row size independently of their field size.

See Row sizes for the scale, shared rowSize default and density behavior.

Color

color selects the standard or vibrant palette. An explicit prop overrides menuDefaultsContextKey's color, with standard as the fallback. Set menuColor through M3VuePlugin for an application default, or provide the context for a subtree. See component defaults.

Submenus inherit their parent menu's resolved color unless explicitly overridden. Select and Combobox menus use the same shared preference, with their menuColor prop taking precedence.

Density

Menu rows inherit --md-density, including nested menus and Select/Combobox options. Each step adjusts vertical whitespace by 4dp; top and bottom padding stop at 4dp each. Labels, icons and multiline content retain their size. Set --md-density: 0 on a menu to keep its default spacing. Explicit --md-menus-menu-item-height, --md-menus-menu-item-top-space and --md-menus-menu-item-bottom-space values override the corresponding density rules.

Floating surface

See floating surface tokens for shared theme colors, borders, shadows, and an interactive example with nested menus and dialogs.

Reference

Menu

Props

Name	Description	Default
shapeOptional	Corner style; inherits the shared shape default. M3Shape | undefined	-
roleOptional	Listbox mode retains the menu surface while the caller owns option navigation. menulistbox	"menu"
sizeOptional	Row size; inherits the nearest row size or defaults to medium. RowSize | undefined	undefined
colorOptional	Visual color style of the menu surface. MenuColor | undefined	-
itemsOptional	Optional declarative menu content rendered from plain objects. MenuContentItem[] | undefined	undefined
multipleOptional	Enables checkbox semantics and array-based model values for items with `value`. boolean | undefined	false
openOptional	- boolean | undefined	false
modelValueOptional	- MenuModelValue	-

Events4

Name	Type	Description
update:open	[value: boolean]	-
closed	[]	-
update:modelValue	[value: MenuModelValue]	-
select	[event: MouseEvent, itemElement: HTMLElement]	-

Slots1

Name	Parameters	Description
default	-	Menu content; usually MenuContainer and MenuGap.

Styling84

Preview

Token	Description
--md-menu-container-elevationElevation Fallbackvar(--md-sys-elevation-level2)	Controls container elevation.
--md-menu-container-shadow-colorColor Fallbackvar(--md-sys-color-shadow)	Controls container shadow color.
--md-menus-active-container-shapeShape Fallbackvar(--md-shape-popover)	Controls active container shape.
--md-menus-container-shapeShape Fallbackvar(--md-shape-popover)	Controls container shape.
--md-menus-gapLayout Fallback0.125rem	Controls gap.
--md-menus-group-paddingLayout Fallback--dp(4)	Controls group padding.
--md-menus-inactive-container-shapeShape Fallbackvar(--md-shape-chip)	Controls inactive container shape.
--md-menus-menu-item-between-spaceLayout Fallback--dp(12)	Controls menu item between space.
--md-menus-menu-item-bottom-spaceLayout Fallback--dp(12)	Controls menu item bottom space.
--md-menus-menu-item-first-child-shapeShape Fallbackcalc(var(--md-menus-container-shape,var(--md-shape-popover))- --dp(3))	Controls menu item first child shape.
--md-menus-menu-item-heightLayout Fallback--dp(48)	Controls menu item height.
--md-menus-menu-item-label-text-fontTypography Fallbackvar(--md-sys-typescale-label-large-font)	Controls menu item label text font.
--md-menus-menu-item-label-text-line-heightTypography Fallbackvar(--md-sys-typescale-label-large-line-height)	Controls menu item label text line height.
--md-menus-menu-item-label-text-sizeLayout Fallbackvar(--md-sys-typescale-label-large-size)	Controls menu item label text size.
--md-menus-menu-item-label-text-trackingTypography Fallbackvar(--md-sys-typescale-label-large-tracking)	Controls menu item label text tracking.
--md-menus-menu-item-label-text-weightTypography Fallbackvar(--md-sys-typescale-label-large-weight)	Controls menu item label text weight.
--md-menus-menu-item-last-child-shapeShape Fallbackcalc(var(--md-menus-container-shape,var(--md-shape-popover))- --dp(3))	Controls menu item last child shape.
--md-menus-menu-item-leading-icon-sizeLayout FallbackTypography, density and icon scale (default reference: --dp(20))	Controls menu item leading icon size.
--md-menus-menu-item-leading-spaceLayout Fallback--dp(12)	Controls menu item leading space.
--md-menus-menu-item-shapeShape Fallbackvar(--md-shape-popover-item)	Controls menu item shape.
--md-menus-menu-item-supporting-text-fontTypography Fallbackvar(--md-sys-typescale-body-small-font)	Controls menu item supporting text font.
--md-menus-menu-item-supporting-text-line-heightTypography Fallbackvar(--md-sys-typescale-body-small-line-height)	Controls menu item supporting text line height.
--md-menus-menu-item-supporting-text-sizeLayout Fallbackvar(--md-sys-typescale-body-small-size)	Controls menu item supporting text size.
--md-menus-menu-item-supporting-text-trackingTypography Fallbackvar(--md-sys-typescale-body-small-tracking)	Controls menu item supporting text tracking.
--md-menus-menu-item-supporting-text-weightTypography Fallbackvar(--md-sys-typescale-body-small-weight)	Controls menu item supporting text weight.
--md-menus-menu-item-top-spaceLayout Fallback--dp(12)	Controls menu item top space.
--md-menus-menu-item-trailing-icon-sizeLayout FallbackTypography, density and icon scale (default reference: --dp(20))	Controls menu item trailing icon size.
--md-menus-menu-item-trailing-spaceLayout Fallback--dp(12)	Controls menu item trailing space.
--md-menus-menu-item-trailing-supporting-text-fontTypography Fallbackvar(--md-sys-typescale-label-large-font)	Controls menu item trailing supporting text font.
--md-menus-menu-item-trailing-supporting-text-line-heightTypography Fallbackvar(--md-sys-typescale-label-large-line-height)	Controls menu item trailing supporting text line height.
--md-menus-menu-item-trailing-supporting-text-sizeLayout Fallbackvar(--md-sys-typescale-label-large-size)	Controls menu item trailing supporting text size.
--md-menus-menu-item-trailing-supporting-text-trackingTypography Fallbackvar(--md-sys-typescale-label-large-tracking)	Controls menu item trailing supporting text tracking.
--md-menus-menu-item-trailing-supporting-text-weightTypography Fallbackvar(--md-sys-typescale-label-large-weight)	Controls menu item trailing supporting text weight.
--md-menus-popover-paddingLayout Fallback0.25rem	Controls popover padding.
--md-menus-standard-container-colorColor Fallbackvar(--md-sys-color-surface-container-low)	Controls standard container color.
--md-menus-standard-menu-item-disabled-label-text-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls standard menu item disabled label text color.
--md-menus-standard-menu-item-disabled-label-text-opacityDisabled Fallback0.38	Controls standard menu item disabled label text opacity.
--md-menus-standard-menu-item-disabled-leading-icon-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls standard menu item disabled leading icon color.
--md-menus-standard-menu-item-disabled-leading-icon-opacityDisabled Fallback0.38	Controls standard menu item disabled leading icon opacity.
--md-menus-standard-menu-item-disabled-supporting-text-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls standard menu item disabled supporting text color.
--md-menus-standard-menu-item-disabled-supporting-text-opacityDisabled Fallback0.38	Controls standard menu item disabled supporting text opacity.
--md-menus-standard-menu-item-disabled-trailing-icon-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls standard menu item disabled trailing icon color.
--md-menus-standard-menu-item-disabled-trailing-icon-opacityDisabled Fallback0.38	Controls standard menu item disabled trailing icon opacity.
--md-menus-standard-menu-item-disabled-trailing-supporting-text-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls standard menu item disabled trailing supporting text color.
--md-menus-standard-menu-item-disabled-trailing-supporting-text-opacityDisabled Fallback0.38	Controls standard menu item disabled trailing supporting text opacity.
--md-menus-standard-menu-item-hovered-state-layer-colorState Fallbackvar(--md-sys-color-on-surface)	Controls standard menu item hovered state layer color.
--md-menus-standard-menu-item-label-text-colorColor Fallbackvar(--md-sys-color-on-surface)	Controls standard menu item label text color.
--md-menus-standard-menu-item-leading-icon-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls standard menu item leading icon color.
--md-menus-standard-menu-item-selected-container-colorState Fallbackvar(--md-sys-color-tertiary-container)	Controls standard menu item selected container color.
--md-menus-standard-menu-item-selected-hovered-state-layer-colorState Fallbackvar(--md-sys-color-on-tertiary-container)	Controls standard menu item selected hovered state layer color.
--md-menus-standard-menu-item-selected-label-text-colorState Fallbackvar(--md-sys-color-on-tertiary-container)	Controls standard menu item selected label text color.
--md-menus-standard-menu-item-selected-leading-icon-colorState Fallbackvar(--md-sys-color-on-tertiary-container)	Controls standard menu item selected leading icon color.
--md-menus-standard-menu-item-selected-supporting-text-colorState Fallbackvar(--md-sys-color-on-tertiary-container)	Controls standard menu item selected supporting text color.
--md-menus-standard-menu-item-selected-trailing-icon-colorState Fallbackvar(--md-sys-color-on-tertiary-container)	Controls standard menu item selected trailing icon color.
--md-menus-standard-menu-item-selected-trailing-supporting-text-colorState Fallbackvar(--md-sys-color-on-tertiary-container)	Controls standard menu item selected trailing supporting text color.
--md-menus-standard-menu-item-supporting-text-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls standard menu item supporting text color.
--md-menus-standard-menu-item-trailing-icon-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls standard menu item trailing icon color.
--md-menus-standard-menu-item-trailing-supporting-text-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls standard menu item trailing supporting text color.
--md-menus-standard-section-label-text-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls standard section label text color.
--md-menus-vibrant-container-colorColor Fallbackvar(--md-sys-color-tertiary-container)	Controls vibrant container color.
--md-menus-vibrant-menu-item-disabled-label-text-colorDisabled Fallbackvar(--md-sys-color-on-tertiary-container)	Controls vibrant menu item disabled label text color.
--md-menus-vibrant-menu-item-disabled-label-text-opacityDisabled Fallback0.38	Controls vibrant menu item disabled label text opacity.
--md-menus-vibrant-menu-item-disabled-leading-icon-colorDisabled Fallbackvar(--md-sys-color-on-tertiary-container)	Controls vibrant menu item disabled leading icon color.
--md-menus-vibrant-menu-item-disabled-leading-icon-opacityDisabled Fallback0.38	Controls vibrant menu item disabled leading icon opacity.
--md-menus-vibrant-menu-item-disabled-supporting-text-colorDisabled Fallbackvar(--md-sys-color-on-tertiary-container)	Controls vibrant menu item disabled supporting text color.
--md-menus-vibrant-menu-item-disabled-supporting-text-opacityDisabled Fallback0.38	Controls vibrant menu item disabled supporting text opacity.
--md-menus-vibrant-menu-item-disabled-trailing-icon-colorDisabled Fallbackvar(--md-sys-color-on-tertiary-container)	Controls vibrant menu item disabled trailing icon color.
--md-menus-vibrant-menu-item-disabled-trailing-icon-opacityDisabled Fallback0.38	Controls vibrant menu item disabled trailing icon opacity.
--md-menus-vibrant-menu-item-disabled-trailing-supporting-text-colorDisabled Fallbackvar(--md-sys-color-on-tertiary-container)	Controls vibrant menu item disabled trailing supporting text color.
--md-menus-vibrant-menu-item-disabled-trailing-supporting-text-opacityDisabled Fallback0.38	Controls vibrant menu item disabled trailing supporting text opacity.
--md-menus-vibrant-menu-item-hovered-state-layer-colorState Fallbackvar(--md-sys-color-on-tertiary-container)	Controls vibrant menu item hovered state layer color.
--md-menus-vibrant-menu-item-label-text-colorColor Fallbackvar(--md-sys-color-on-tertiary-container)	Controls vibrant menu item label text color.
--md-menus-vibrant-menu-item-leading-icon-colorColor Fallbackvar(--md-sys-color-on-tertiary-container)	Controls vibrant menu item leading icon color.
--md-menus-vibrant-menu-item-selected-container-colorState Fallbackvar(--md-sys-color-tertiary)	Controls vibrant menu item selected container color.
--md-menus-vibrant-menu-item-selected-hovered-state-layer-colorState Fallbackvar(--md-sys-color-on-tertiary)	Controls vibrant menu item selected hovered state layer color.
--md-menus-vibrant-menu-item-selected-label-text-colorState Fallbackvar(--md-sys-color-on-tertiary)	Controls vibrant menu item selected label text color.
--md-menus-vibrant-menu-item-selected-leading-icon-colorState Fallbackvar(--md-sys-color-on-tertiary)	Controls vibrant menu item selected leading icon color.
--md-menus-vibrant-menu-item-selected-supporting-text-colorState Fallbackvar(--md-sys-color-on-tertiary)	Controls vibrant menu item selected supporting text color.
--md-menus-vibrant-menu-item-selected-trailing-icon-colorState Fallbackvar(--md-sys-color-on-tertiary)	Controls vibrant menu item selected trailing icon color.
--md-menus-vibrant-menu-item-selected-trailing-supporting-text-colorState Fallbackvar(--md-sys-color-on-tertiary)	Controls vibrant menu item selected trailing supporting text color.
--md-menus-vibrant-menu-item-supporting-text-colorColor Fallbackvar(--md-sys-color-on-tertiary-container)	Controls vibrant menu item supporting text color.
--md-menus-vibrant-menu-item-trailing-icon-colorColor Fallbackvar(--md-sys-color-on-tertiary-container)	Controls vibrant menu item trailing icon color.
--md-menus-vibrant-menu-item-trailing-supporting-text-colorColor Fallbackvar(--md-sys-color-on-tertiary-container)	Controls vibrant menu item trailing supporting text color.
--md-menus-vibrant-section-label-text-colorColor Fallbackvar(--md-sys-color-on-tertiary-container)	Controls vibrant section label text color.

update:open(false) reflects the native popover closing immediately. Use closed for cleanup that must wait until the Menu-owned opacity and scale exit finishes. Animations inside slotted menu content are not included.

Menu.show(focusFirst = false, source?) can also be called while the Menu is open. A new source updates its CSS anchor while keeping the Menu open; this does not emit update:open(false) or closed, and closes any submenus. The same or omitted source keeps the current anchor. Each call with focusFirst: true explicitly requests focus on the first item; false preserves focus. After the Menu closes, a later call without source does not reuse the previous explicit source.

MenuContainer

Slots1

Name	Parameters	Description
default	-	Menu section content, such as labels, items, and dividers.

MenuItem

Props

Name	Description	Default
shapeOptional	Corner style; inherits the shared shape default. M3Shape | undefined	-
sizeOptional	Row size; inherits the nearest row size or defaults to medium. RowSize | undefined	undefined
valueOptional	Optional value that participates in Menu selection state. MenuItemValue | undefined	undefined
hrefOptional	Optional href. When provided, the item renders as an anchor. string | undefined	undefined
disabledOptional	Disables item interaction. boolean | undefined	false
closeOnSelectOptional	Whether selecting this item should close the menu chain. Ignored for submenu triggers. boolean | undefined	true
selectedOptional	Marks item as selected/active. boolean | undefined	false
roleOptional	Accessible menu item role for selectable items. optionmenuitemmenuitemradiomenuitemcheckbox	undefined
checkedOptional	Checked state for radio/checkbox menu items. boolean | undefined	false
submenuOptional	Marks the item as a submenu trigger for future nested menus. boolean | undefined	false
submenuOpenOptional	Current open state of the submenu trigger, if applicable. boolean | undefined	false

Slots6

Name	Parameters	Description
leading	-	Optional leading content, such as an icon.
default	-	Main menu item text.
trailing	-	Optional trailing icon content.
badge	-	Optional badge content.
trailingText	-	Optional trailing supporting text.
supporting	-	Optional supporting text shown below the main label.

MenuSubMenu

Props

Name	Description	Default
shapeOptional	- M3Shape | undefined	-
sizeOptional	Row size; inherits the nearest row size or defaults to medium. RowSize | undefined	-
colorOptional	Visual color style of the nested menu surface. Defaults to the parent menu color. MenuColor | undefined	-
debugSafeTriangleOptional	Visualize the safe triangle used by pointer navigation. boolean | undefined	-
openOptional	- boolean | undefined	false

Events1

Name	Type	Description
update:open	[value: boolean]	-

Slots2

Name	Parameters	Description
trigger	-	Trigger content. Usually a MenuItem with submenu state.
default	-	Nested menu content; usually MenuContainer and MenuGap.

MenuDivider

MenuGap

MenuLabel

Slots1

Name	Parameters	Description
default	-	Section label content.

Anatomy

Highlight

Element	Part	Selector
<div>	root	[data-scope="menu"][data-part="root"] left_clickLMBCopy
<div>	surface	[data-scope="menu"][data-part="surface"] left_clickLMBCopy
<div>	container	[data-scope="menu"][data-part="container"] left_clickLMBCopy
<hr>	divider	[data-scope="menu"][data-part="divider"] left_clickLMBCopy
<div>	gap	[data-scope="menu"][data-part="gap"] left_clickLMBCopy
<div>	label	[data-scope="menu"][data-part="label"] left_clickLMBCopy
<div>	submenu	[data-scope="menu"][data-part="submenu"] left_clickLMBCopy

Anatomy

Highlight

Element	Part	Selector
<component>	root	[data-scope="menu-item"][data-part="root"] left_clickLMBCopy
<span>	leadingconditional	[data-scope="menu-item"][data-part="leading"] left_clickLMBCopy
<span>	content	[data-scope="menu-item"][data-part="content"] left_clickLMBCopy
<span>	label	[data-scope="menu-item"][data-part="label"] left_clickLMBCopy
<span>	supportingconditional	[data-scope="menu-item"][data-part="supporting"] left_clickLMBCopy
<span>	suffixconditional	[data-scope="menu-item"][data-part="suffix"] left_clickLMBCopy
<span>	trailingconditional	[data-scope="menu-item"][data-part="trailing"] left_clickLMBCopy
<span>	badgeconditional	[data-scope="menu-item"][data-part="badge"] left_clickLMBCopy
<span>	trailing-textconditional	[data-scope="menu-item"][data-part="trailing-text"] left_clickLMBCopy

Composable

useMenu

Full type signature

function useMenu(options: UseMenuOptions): UseMenuReturn

Source: src/composables/useMenu.ts

Field	Type	Required	Description	Default
menuId	string	Yes	Unique ID for the menu instance.	-
role	(() => "menu" | "listbox") | undefined	No	Listbox callers own navigation over their complete logical collection.	-
menuRef	Ref<HTMLElement | undefined, HTMLElement | undefined>	Yes	Ref to the menu DOM element.	-
open	Ref<boolean, boolean>	Yes	Reactive open state.	-
modelValue	Ref<MenuModelValue, MenuModelValue>	Yes	Reactive model value for selection.	-
multiple	() => boolean	Yes	Whether multi-select is enabled.	-
onSelect	((event: MouseEvent, itemElement: HTMLElement) => void) | undefined	No	Notify parent of item selection.	-
exitElements	(() => readonly (HTMLElement | null | undefined)[]) | undefined	No	Component-owned elements whose exit motion must finish with the menu root.	-
onClosed	(() => void) | undefined	No	Runs after the menu's visual exit finishes.	-
parentCloseAll	(() => void) | undefined	No	Parent menu context (for nested menus).	-
parentSubmenu	{ close: () => void; closeAndFocusTrigger: () => void; } | null | undefined	No	Parent submenu context.	-

Field	Type	Required	Description	Default
show	(focusFirst?: boolean, source?: HTMLElement) => Promise<void>	Yes	Show or reanchor the menu; focusFirst explicitly focuses the first enabled item.	-
hide	() => void	Yes	Hide the menu.	-
toggle	() => void	Yes	Toggle menu open state.	-
registerSubmenu	(close: () => void) => () => void	Yes	Register a submenu closer. Returns unregister function.	-
closeSubmenus	(except?: () => void) => void	Yes	Close all submenus except the given one.	-
closeMenuChain	() => void	Yes	Close the entire menu chain (including parent menus).	-
isValueSelected	(value: MenuItemValue) => boolean	Yes	Check if a menu item value is currently selected.	-
toggleValue	(value: MenuItemValue) => void	Yes	Toggle a menu item value in the selection.	-
onMenuKeydown	(event: KeyboardEvent) => void	Yes	Keyboard handler for the menu element.	-
onMenuClick	(event: MouseEvent) => void	Yes	Click handler for the menu element.	-
onMenuFocusIn	(event: FocusEvent) => void	Yes	Focus-in handler for the menu element.	-
onMenuToggle	(event: Event) => void	Yes	Popover toggle handler for the menu element.	-
focusItem	(index: number) => void	Yes	Focus a specific menu item by index (wrapping).	-
getMenuItemElements	() => HTMLElement[]	Yes	Get all enabled menu item elements owned by this menu.	-