Breadcrumb — Data display

Breadcrumbs

VdBreadcrumb renders an accessible breadcrumb trail from an items array (or a custom default slot). It is markup-only — built on breadcrumbs.css — with the current page marked by aria-current="page" and no anchor.

From an items array

<!-- Rendered output of &lt;VdBreadcrumb :items="trail" /&gt; -->
<nav class="vd-breadcrumbs" aria-label="Breadcrumb">
  <ol class="vd-breadcrumb vd-breadcrumb-separator-slash">
    <li class="vd-breadcrumb-item">
      <a class="vd-breadcrumb-link" href="/">Home</a>
    </li>
    <li class="vd-breadcrumb-item">
      <a class="vd-breadcrumb-link" href="/components">Components</a>
    </li>
    <li class="vd-breadcrumb-item vd-breadcrumb-current" aria-current="page">
      Breadcrumb
    </li>
  </ol>
</nav>

Custom slot (icons)

<VdBreadcrumb aria-label="Custom breadcrumb">
  <li class="vd-breadcrumb-item">
    <a class="vd-breadcrumb-link" href="/"><i class="ph ph-house"></i> Home</a>
  </li>
  <li class="vd-breadcrumb-item">
    <a class="vd-breadcrumb-link" href="/settings">Settings</a>
  </li>
  <li class="vd-breadcrumb-item vd-breadcrumb-current" aria-current="page">
    Profile
  </li>
</VdBreadcrumb>

API Reference

Usage

<script setup lang="ts">
import { VdBreadcrumb } from "@vanduo-oss/vd3";
import type { BreadcrumbItem } from "@vanduo-oss/vd3";

const trail: BreadcrumbItem[] = [
  { label: "Home", href: "/" },
  { label: "Components", href: "/components" },
  { label: "Breadcrumb" }, // last item = current page
];
</script>

<template>
  <VdBreadcrumb :items="trail" separator="chevron" />
</template>

CSS Classes

Class	Description
`.vd-breadcrumbs`	The <nav> landmark wrapper (aria-label="Breadcrumb").
`.vd-breadcrumb`	The <ol> trail element.
`.vd-breadcrumb-item`	A single <li> entry in the trail.
`.vd-breadcrumb-link`	Anchor rendered for a non-current, linked item.
`.vd-breadcrumb-current`	Current item — paired with aria-current="page" and no anchor.
`.vd-breadcrumb-separator-slash / -chevron / -arrow / -dot / -pipe`	Separator glyph rendered between items (default: slash).
`.vd-breadcrumb-sm / -lg`	Compact or spacious size variants.

Component API

Prop / slot / type	Description
`:items`	BreadcrumbItem[] — the trail. Each item is { label, href?, current? }.
`:separator`	'slash' \| 'chevron' \| 'arrow' \| 'dot' \| 'pipe' — glyph between items (default 'slash').
`:size`	'sm' \| 'lg' — compact or spacious sizing.
`:aria-label`	Accessible label for the <nav> landmark (default 'Breadcrumb').
`default slot`	Supply your own <li class="vd-breadcrumb-item"> markup instead of :items.
`BreadcrumbItem (type export)`	{ label: string; href?: string; current?: boolean }. The current item is the one with current: true, or — if none is set — the last item.

Accessibility

The trail is a <nav> landmark labelled Breadcrumb by default — override with :aria-label.
The current page renders without an anchor and carries aria-current="page" so assistive tech announces it as the current location.
Only linked, non-current items become <a> elements, keeping the trail keyboard-navigable without a dead final link.