Vitral 0.2
Menu

MegaMenu

A menubar whose items open wide panels of grouped links in columns, like this site's own top bar.

WAI-ARIA tested

Import

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

Horizontal

Last link: —
<script setup lang="ts">import { MegaMenu, type MegaMenuItem, type MenuItem } from '@vitral/vue';import { ref } from 'vue'; const last = ref('—');const run = ({ item }: { item: MenuItem }) => (last.value = item.label ?? '');const items: MegaMenuItem[] = [    {        label: 'Components',        icon: 'grip',        items: [            [{ label: 'Form', items: [{ label: 'InputText', command: run }, { label: 'Select', command: run }, { label: 'DatePicker', command: run }] }],            [                { label: 'Data', items: [{ label: 'DataGrid', command: run }, { label: 'Tree', command: run }] },                { label: 'Overlay', items: [{ label: 'Dialog', command: run }, { label: 'Popover', command: run }] }            ],            [{ label: 'Menu', items: [{ label: 'Menubar', command: run }, { label: 'MegaMenu', command: run }, { label: 'Dock', command: run, disabled: true }] }]        ]    },    {        label: 'Guides',        icon: 'file',        items: [[{ label: 'Start', items: [{ label: 'Installation', command: run }, { label: 'Theming', command: run }] }]]    },    { label: 'GitHub', icon: 'externalLink', url: '#' }];</script> <template>    <MegaMenu :model="items" aria-label="Site" />    <small style="color: var(--vt-text-muted-color)">Last link: {{ last }}</small></template>

Vertical

<script setup lang="ts">import { MegaMenu, type MegaMenuItem } from '@vitral/vue'; const items: MegaMenuItem[] = [    {        label: 'Components',        icon: 'grip',        items: [            [{ label: 'Form', items: [{ label: 'InputText' }, { label: 'Select' }, { label: 'DatePicker' }] }],            [                { label: 'Data', items: [{ label: 'DataGrid' }, { label: 'Tree' }] },                { label: 'Overlay', items: [{ label: 'Dialog' }, { label: 'Popover' }] }            ],            [{ label: 'Menu', items: [{ label: 'Menubar' }, { label: 'MegaMenu' }, { label: 'Dock', disabled: true }] }]        ]    },    {        label: 'Guides',        icon: 'file',        items: [[{ label: 'Start', items: [{ label: 'Installation' }, { label: 'Theming' }] }]]    },    { label: 'GitHub', icon: 'externalLink', url: '#' }];</script> <template>    <MegaMenu :model="items" orientation="vertical" aria-label="Site (vertical)" /></template>

API

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

Props

NameTypeDescription
modelMegaMenuItem[]—
orientation'horizontal' | 'vertical'A bar (the default) whose panels drop below it, or a column whose panels open beside it.
ariaLabelstringNames the menu.
ariaLabelledbystring—

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

Slots

NameSlot propsDescription
start——
end——
item(props: { item: MenuItem | MegaMenuItem; root: boolean; focused: boolean; open: boolean })An item's content, top-level or in a panel.