Vitral 0.2
Menu

TieredMenu

A menu whose items open submenus beside them, to any depth, inline or as a popup.

WAI-ARIA tested

Import

main.ts
import { TieredMenu } from '@vitral/vue';

Inline

Last command: —
<script setup lang="ts">import { TieredMenu, type MenuItem } from '@vitral/vue';import { ref } from 'vue'; const last = ref('—');const run = ({ item }: { item: MenuItem }) => (last.value = item.label ?? ''); const items: MenuItem[] = [    {        label: 'File',        icon: 'file',        items: [            { label: 'New', icon: 'plus', items: [{ label: 'Document', command: run }, { label: 'Spreadsheet', command: run }, { label: 'Presentation', command: run }] },            { label: 'Open', icon: 'folderOpen', command: run },            { separator: true },            { label: 'Export', icon: 'download', items: [{ label: 'PDF', command: run }, { label: 'CSV', command: run }] }        ]    },    {        label: 'Edit',        icon: 'pencil',        items: [            { label: 'Copy', icon: 'copy', command: run },            { label: 'Delete', icon: 'trash', command: run, disabled: true }        ]    },    { label: 'Search', icon: 'search', command: run },    { separator: true },    { label: 'Help', icon: 'externalLink', url: '#' }];</script> <template>    <TieredMenu :model="items" aria-label="Workspace" />    <small style="color: var(--vt-text-muted-color)">Last command: {{ last }}</small></template>

API

Read from packages/vue/src/components/TieredMenu/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
modelMenuItem[]The items; an item's `items` open as a submenu beside it, to any depth.
popupbooleanA popup menu, opened by `toggle(event)` / `show(event)` and anchored to the event's element.
appendTostringWhere a popup renders: `'body'` (the default), `'self'` to stay in place, or a selector.
placementOverlayPlacement—
ariaLabelstringNames the menu. A popup without one is named by the element that opened it.
ariaLabelledbystring—

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
show——
hide——

Slots

NameSlot propsDescription
start——
end——
item(props: NestedMenuItemSlotProps)An item's content. The menuitem element around it, with its role and keyboard, stays.