Vitral 0.2
Menu

Breadcrumb

Where the page sits in a hierarchy: a trail of links with the current page last and separators in between.

WAI-ARIA tested

Import

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

With a home item

<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>

Icons and a custom separator

<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

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

Props

NameTypeDescription
modelBreadcrumbItem[]The trail, root first; the last item is the current page.
homeBreadcrumbItemAn item before the trail. Shows the home icon when it has neither label nor icon.

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

Slots

NameSlot propsDescription
item(props: { item: BreadcrumbItem; label: string | undefined; current: boolean })An item's content: its icon and label. The link or button around it stays.
separator—Replaces the chevron between items.

Used in these templates