Breadcrumb

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.

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