Menubar

1<script setup lang="ts">2import { Avatar, InputText, Menubar, type MenuItem } from '@vitral/vue';3import { ref } from 'vue';4 5const last = ref('—');6const run = ({ item }: { item: MenuItem }) => (last.value = item.label ?? '');7const items: MenuItem[] = [8    { label: 'Home', icon: 'home', command: run },9    {10        label: 'Projects',11        icon: 'folder',12        items: [13            { label: 'Vitral', icon: 'star', command: run },14            { label: 'Archive', icon: 'folderOpen', items: [{ label: '2025', command: run }, { label: '2024', command: run }] },15            { separator: true },16            { label: 'New project', icon: 'plus', command: run }17        ]18    },19    {20        label: 'Team',21        icon: 'user',22        items: [23            { label: 'Members', command: run },24            { label: 'Invitations', command: run, disabled: true }25        ]26    },27    { label: 'Docs', icon: 'externalLink', url: '#' }28];29</script>30 31<template>32    <Menubar :model="items" aria-label="Application">33        <template #start><strong style="padding-inline: 0.5rem">Vitral</strong></template>34        <template #end>35            <div style="display: flex; align-items: center; gap: 0.5rem">36                <InputText size="small" placeholder="Search" aria-label="Search" />37                <Avatar label="GW" shape="circle" />38            </div>39        </template>40    </Menubar>41    <small style="color: var(--vt-text-muted-color)">Last command: {{ last }}</small>42</template>

1<script setup lang="ts">2import { Menubar, type MenuItem } from '@vitral/vue';3 4const items: MenuItem[] = [5    { label: 'Home', icon: 'home' },6    {7        label: 'Projects',8        icon: 'folder',9        items: [10            { label: 'Vitral', icon: 'star' },11            { label: 'Archive', icon: 'folderOpen', items: [{ label: '2025' }, { label: '2024' }] },12            { separator: true },13            { label: 'New project', icon: 'plus' }14        ]15    },16    {17        label: 'Team',18        icon: 'user',19        items: [{ label: 'Members' }, { label: 'Invitations', disabled: true }]20    },21    { label: 'Docs', icon: 'externalLink', url: '#' }22];23</script>24 25<template>26    <Menubar :model="items" aria-label="Application (compact)" breakpoint="100000px" />27    <small style="color: var(--vt-text-muted-color)">A breakpoint wider than any screen keeps this one in its small-screen form.</small>28</template>