Breadcrumb 1.2.2

Show the user's location in the site hierarchy with .velin-breadcrumb. Includes built-in separator via CSS custom property and two alternate separator styles. Deutsch: Brotkruemel

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Show the user’s location in a hierarchy with .velin-breadcrumb and linked ancestors.
Deep pages where parent sections are not obvious from the primary nav alone.

When not

Primary site navigation — use Navbar / Navs & tabs.
Step-by-step wizards — use Stepper.

Wrong vs right

Always use the BEM pieces __item and __link. Bare <li>/<a> inside .velin-breadcrumb miss separators and current-page styles.

<!-- Wrong -->
<nav class="velin-breadcrumb">
  <ol><li><a href="/">Home</a></li></ol>
</nav>

<!-- Right -->
<nav class="velin-breadcrumb" aria-label="Breadcrumb">
  <ol class="velin-breadcrumb__list">
    <li class="velin-breadcrumb__item">
      <a href="/" class="velin-breadcrumb__link">Home</a>
    </li>
    <li class="velin-breadcrumb__item" aria-current="page">Here</li>
  </ol>
</nav>

Basic Example

<nav class="velin-breadcrumb" aria-label="Breadcrumb">
  <ol class="velin-breadcrumb__list">
    <li class="velin-breadcrumb__item">
      <a href="/" class="velin-breadcrumb__link">Home</a>
    </li>
    <li class="velin-breadcrumb__item">
      <a href="/library" class="velin-breadcrumb__link">Library</a>
    </li>
    <li class="velin-breadcrumb__item" aria-current="page">Data</li>
  </ol>
</nav>

Custom Separators

<!-- Arrow separator › -->
<nav class="velin-breadcrumb velin-breadcrumb--arrow" aria-label="Breadcrumb">…</nav>

<!-- Dot separator · -->
<nav class="velin-breadcrumb velin-breadcrumb--dot" aria-label="Breadcrumb">…</nav>

<!-- Or override the variable directly -->
<nav class="velin-breadcrumb" style="--velin-breadcrumb-separator: '→';">…</nav>

Accessibility

Wrap in <nav aria-label="Breadcrumb">.
Mark the current page with aria-current="page" on the last <li>.
Use an ordered list (<ol>) to convey hierarchy to assistive tech.

CSS Variables

Variable	Default	Description
`--velin-breadcrumb-separator`	`"/"`	Separator character
`--velin-color-primary`	—	Link colour
`--velin-color-text-muted`	—	Current page colour
`--velin-color-text-subtle`	—	Separator colour