Vitral 0.2
Menu

MegaMenu

Uma barra de menu cujos itens abrem painéis largos de links agrupados em colunas, como a barra superior deste site.

Testado com WAI-ARIA

Importação

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

Lido de packages/vue/src/components/MegaMenu/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
modelMegaMenuItem[]—
orientation'horizontal' | 'vertical'Uma barra (o padrão) cujos painéis descem abaixo dela, ou uma coluna cujos painéis abrem ao lado.
ariaLabelstringDá nome ao menu.
ariaLabelledbystring—

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Slots

NomeProps do slotDescrição
start——
end——
item(props: { item: MenuItem | MegaMenuItem; root: boolean; focused: boolean; open: boolean })O conteúdo de um item, de primeiro nível ou num painel.