1. Docs
2. Komponenten
3. Brotkruemel

Brotkruemel 1.2.0

Zeige den Standort des Nutzers in der Site-Hierarchie mit .velin-breadcrumb. Enthaelt built-in separator via CSS custom property and two alternate separator styles. English: Breadcrumb

Wann verwenden

• Zeige den Standort des Nutzers in einer Hierarchie mit .velin-breadcrumb und verlinkten Vorfahren.
• Tiefe Seiten, bei denen uebergeordnete Abschnitte aus der Primaernavigation allein nicht offensichtlich sind.

Wann nicht verwenden

• Primaer site navigation — use Navbar / Navs & tabs.
• Schritt-fuer-Schritt-Assistenten: verwende Stepper.

Falsch vs. richtig

Verwende immer die BEM-Teile __item und __link. Nackte <li>/<a> in .velin-breadcrumb verpassen Trenner und Styles fuer die aktuelle Seite.

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

Einfaches Beispiel

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

Eigene Trenner

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

Barrierefreiheit

• Wrap in <nav aria-label="Breadcrumb">.
• Mark the current page with aria-current="page" on the last <li>.
• Verwende eine geordnete Liste (<ol>), um die Hierarchie an assistive Technologien zu vermitteln.

CSS-Variablen

Verwandt

• Navbar
• Navs & tabs
• Pagination