Menu

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

Examples

Dropdown

---

Actions

Selected: None

Context Menu

Right click here for context menu

Selected: None

Selectable Values

Single value: copy

Multiple values: archive

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

Current value: copy

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>

Composable

useMenu

function useMenu(options: UseMenuOptions): UseMenuReturn

Source: src/composables/useMenu.ts

Field	Type	Required	Description	Default
menuId	string	Yes	Unique ID for the menu instance.	-
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.	-
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 the menu.	-
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.	-

API

Menu

Props

Name	Description	Default
colorOptional	Visual color style of the menu surface. MenuColor | undefined	"standard"
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	-

Events3

Name	Type	Description
update:open	[value: boolean]	-
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 Fallback--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 Fallback--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.

MenuContainer

Props

No props documented.

Events0

No events documented.

Slots1

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

MenuItem

Props

Name	Description	Default
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. menuitemmenuitemradiomenuitemcheckbox	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

Events0

No events documented.

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
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

Props

No props documented.

Events0

No events documented.

Slots0

No slots documented.

MenuGap

Props

No props documented.

Events0

No events documented.

Slots0

No slots documented.

MenuLabel

Props

No props documented.

Events0

No events documented.

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