Vitral 0.2
Menu

Breadcrumb

Onde a página fica numa hierarquia: uma trilha de links com a página atual por último e separadores entre eles.

Testado com WAI-ARIA

Importação

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

Com um item inicial

<script setup lang="ts">import { Breadcrumb, type BreadcrumbItem } from '@vitral/vue'; const home: BreadcrumbItem = { url: '#' };const trail: BreadcrumbItem[] = [    { label: 'Electronics', url: '#' },    { label: 'Computers', url: '#' },    { label: 'Laptops', url: '#' },    { label: 'Vitral 14' }];</script> <template>    <Breadcrumb :home="home" :model="trail" /></template>

Ícones e um separador personalizado

<script setup lang="ts">import { Breadcrumb, type BreadcrumbItem } from '@vitral/vue'; const folders: BreadcrumbItem[] = [    { label: 'Documents', icon: 'folder', url: '#' },    { label: 'Projects', icon: 'folder', url: '#' },    { label: 'README.md', icon: 'file' }];</script> <template>    <Breadcrumb :model="folders">        <template #separator>/</template>    </Breadcrumb></template>

API

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

Props

NomeTipoDescrição
modelBreadcrumbItem[]O caminho, a raiz primeiro; o último item é a página atual.
homeBreadcrumbItemUm item antes do caminho. Mostra o ícone de início quando não tem rótulo nem ícone.

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

Slots

NomeProps do slotDescrição
item(props: { item: BreadcrumbItem; label: string | undefined; current: boolean })O conteúdo de um item: seu ícone e rótulo. O link ou botão em volta permanece.
separator—Substitui a seta entre os itens.

Usado nestes templates