Vitral 0.2
Menu

PanelMenu

Sections of navigation that expand in place, each a tree of its items, for a sidebar.

WAI-ARIA tested

Import

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

Basic

Last command: —
<script setup lang="ts">import { PanelMenu, 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: 'Files',        icon: 'folder',        items: [            { label: 'Documents', icon: 'folderOpen', items: [{ label: 'Invoices', icon: 'file', command: run }, { label: 'Contracts', icon: 'file', command: run }] },            { label: 'Images', icon: 'folderOpen', command: run },            { label: 'Shared', icon: 'externalLink', url: '#' }        ]    },    { label: 'Cloud', icon: 'upload', items: [{ label: 'Upload', icon: 'upload', command: run }, { label: 'Download', icon: 'download', command: run }, { label: 'Sync', icon: 'refresh', command: run }] },    { label: 'Account', icon: 'user', items: [{ label: 'Settings', icon: 'sliders', command: run }, { label: 'Privacy', command: run, disabled: true }] },    { label: 'Sign out', icon: 'arrowRight', command: run }];const expanded = ref<Record<string, boolean>>({ '0': true });</script> <template>    <PanelMenu v-model:expanded-keys="expanded" :model="items" />    <small style="color: var(--vt-text-muted-color)">Last command: {{ last }}</small></template>

Several open

<script setup lang="ts">import { PanelMenu, type MenuItem } from '@vitral/vue'; const items: MenuItem[] = [    {        label: 'Files',        icon: 'folder',        items: [            { label: 'Documents', icon: 'folderOpen', items: [{ label: 'Invoices', icon: 'file' }, { label: 'Contracts', icon: 'file' }] },            { label: 'Images', icon: 'folderOpen' },            { label: 'Shared', icon: 'externalLink', url: '#' }        ]    },    { label: 'Cloud', icon: 'upload', items: [{ label: 'Upload', icon: 'upload' }, { label: 'Download', icon: 'download' }, { label: 'Sync', icon: 'refresh' }] },    { label: 'Account', icon: 'user', items: [{ label: 'Settings', icon: 'sliders' }, { label: 'Privacy', disabled: true }] },    { label: 'Sign out', icon: 'arrowRight' }];</script> <template>    <PanelMenu :model="items" multiple /></template>

API

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

Props

NameTypeDescription
modelMenuItem[]The sections; each section's `items` form its tree, to any depth.
multiplebooleanLet several sections be open at once.

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

Emits

EventPayloadDescription
panel-openevent: { originalEvent: Event; item: MenuItem }—
panel-closeevent: { originalEvent: Event; item: MenuItem }—

Slots

NameSlot propsDescription
item(props: { item: MenuItem; root: boolean; expanded: boolean; hasSubmenu: boolean })A section header's or an item's content.
headericon(props: { item: MenuItem; expanded: boolean })—
submenuicon(props: { item: MenuItem; expanded: boolean })—