Menu
Menu supports dropdown, context, submenu, and object-driven item rendering while keeping keyboard and selection behavior inside the component set.
Dropdown
Context Menu
Selectable Values
Declarative Items
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 | - |
Events
| Name | Type | Description |
|---|---|---|
update:modelValue | [value: MenuModelValue] | - |
update:open | [value: boolean] | - |
select | [event: MouseEvent, itemElement: HTMLElement] | - |
Slots
| Name | Parameters | Description |
|---|---|---|
default | - | Menu content; usually MenuContainer and MenuGap. |
MenuContainer
Props
No props documented.
Events
No events documented.
Slots
| 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 |
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 |
Events
No events documented.
Slots
| 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 |
Events
| Name | Type | Description |
|---|---|---|
update:open | [value: boolean] | - |
Slots
| 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.
Events
No events documented.
Slots
No slots documented.
MenuGap
Props
No props documented.
Events
No events documented.
Slots
No slots documented.
MenuLabel
Props
No props documented.
Events
No events documented.
Slots
| Name | Parameters | Description |
|---|---|---|
default | - | Section label content. |