Vitral 0.2
Menu

Sidebar

A barra lateral recolhível da aplicação: navegação com sublistas, que se reduz aos ícones e vira uma gaveta em telas pequenas.

Testado com WAI-ARIA

Importação

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

Recolhível aos ícones

Acme Inc.
GWGustavo
Page: home
<script setup lang="ts">import { Avatar, Sidebar, type MenuItem } from '@vitral/vue';import { ref } from 'vue'; const active = ref('home');const go = (key: string) => () => (active.value = key);const items: MenuItem[] = [    { label: 'Home', key: 'home', icon: 'home', command: go('home') },    { label: 'Inbox', key: 'inbox', icon: 'bell', command: go('inbox') },    {        label: 'Workspace',        items: [            { label: 'Projects', key: 'projects', icon: 'folder', items: [{ label: 'Vitral', key: 'vitral', command: go('vitral') }, { label: 'Website', key: 'site', command: go('site') }] },            { label: 'Calendar', key: 'calendar', icon: 'calendar', command: go('calendar') },            { label: 'Reports', key: 'reports', icon: 'file', command: go('reports') }        ]    },    { label: 'Settings', items: [{ label: 'Preferences', key: 'prefs', icon: 'sliders', command: go('prefs') }] }]; const collapsed = ref(false);</script> <template>    <div style="display: flex; height: 26rem; width: 100%; border: 1px solid var(--vt-content-border-color); border-radius: 8px; overflow: hidden">        <Sidebar v-model:collapsed="collapsed" :model="items" :active-key="active">            <template #header="{ collapsed: small }">                <strong>{{ small ? 'A' : 'Acme Inc.' }}</strong>            </template>            <template #footer>                <div style="display: flex; align-items: center; gap: 0.5rem">                    <Avatar label="GW" shape="circle" />                    <span>Gustavo</span>                </div>            </template>        </Sidebar>        <main style="flex: 1; padding: 1rem">Page: {{ active }}</main>    </div></template>

Fora da tela

<script setup lang="ts">import { Button, Sidebar, type MenuItem } from '@vitral/vue';import { ref } from 'vue'; const active = ref('home');const go = (key: string) => () => (active.value = key);const items: MenuItem[] = [    { label: 'Home', key: 'home', icon: 'home', command: go('home') },    { label: 'Inbox', key: 'inbox', icon: 'bell', command: go('inbox') },    {        label: 'Workspace',        items: [            { label: 'Projects', key: 'projects', icon: 'folder', items: [{ label: 'Vitral', key: 'vitral', command: go('vitral') }, { label: 'Website', key: 'site', command: go('site') }] },            { label: 'Calendar', key: 'calendar', icon: 'calendar', command: go('calendar') },            { label: 'Reports', key: 'reports', icon: 'file', command: go('reports') }        ]    },    { label: 'Settings', items: [{ label: 'Preferences', key: 'prefs', icon: 'sliders', command: go('prefs') }] }]; const hidden = ref(false);</script> <template>    <div style="display: flex; height: 18rem; width: 100%; border: 1px solid var(--vt-content-border-color); border-radius: 8px; overflow: hidden">        <Sidebar v-model:collapsed="hidden" :model="items" :active-key="active" collapsible="offcanvas" aria-label="Main navigation" />        <div style="flex: 1; padding: 1rem">            <Button :label="hidden ? 'Show sidebar' : 'Hide sidebar'" icon="sidebar" severity="secondary" :aria-expanded="!hidden" @click="hidden = !hidden" />        </div>    </div></template>

API

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

Props

NomeTipoDescrição
modelMenuItem[]A navegação. Um item de primeiro nível com `items` é um grupo com rótulo; um item com `items` dentro de um grupo abre uma sublista no lugar. Os itens são links (`url`) ou botões (`command`).
collapsible'icon' | 'offcanvas' | 'none'Como ela recolhe: até os ícones (o padrão), para fora da tela por completo, ou de jeito nenhum.
side'left' | 'right'Em que borda fica. O padrão é `'left'`.
activeKeystringA chave do item da página atual; ele é marcado com `aria-current="page"`. Itens com `active` também são marcados.
mobileBreakpointstringAbaixo desta largura ela vira um drawer aberto com `v-model:visible`. O padrão é `'768px'`.
showTogglebooleanMostra o botão de recolher no cabeçalho. O padrão é true.
ariaLabelstringDá nome à navegação. O padrão é o "Navigation" do locale.

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

Emits

EventoPayloadDescrição
item-clickevent: { originalEvent: Event; item: MenuItem }—

Slots

NomeProps do slotDescrição
header(props: { collapsed: boolean })Acima da navegação: um logo, um seletor de workspace.
footer(props: { collapsed: boolean })Abaixo dela: o usuário conectado.
default(props: { collapsed: boolean })Mais conteúdo depois dos grupos do model.
item(props: { item: MenuItem; collapsed: boolean; active: boolean })O conteúdo de um item.

Usado nestes templates