Bootstrap 5.2 / Componenten

Breadcrumb

Geef de locatie van de huidige pagina binnen een navigatiehiërarchie aan, met scheidingstekens die automatisch via CSS worden toegevoegd.

Voorbeeld

Gebruik een genummerde of ongenummerde lijst met gelinkte lijstitems om een minimaal opgemaakte breadcrumb te maken. Gebruik onze utilities om naar wens extra stijlen toe te voegen.

HTML

<nav aria-label="kruimelpad">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="kruimelpad">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Bibliotheek</li>
  </ol>
</nav>

<nav aria-label="kruimelpad">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Bibliotheek</a></li>
    <li class="breadcrumb-item active" aria-current="page">Gegevens</li>
  </ol>
</nav>

Scheidingstekens

Scheidingstekens worden automatisch in CSS toegevoegd via ::before en content. Je kunt ze wijzigen door de lokale CSS custom property --bs-breadcrumb-divider aan te passen, of via de Sass-variabele $breadcrumb-divider — en $breadcrumb-divider-flipped voor de RTL-tegenhanger, indien nodig. We gaan standaard uit van onze Sass-variabele, die als fallback voor de custom property is ingesteld. Zo krijg je een globaal scheidingsteken dat je op elk moment kunt overschrijven zonder CSS te hercompileren.

HTML

<nav style="--bs-breadcrumb-divider: '>';" aria-label="kruimelpad">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Bibliotheek</li>
  </ol>
</nav>

Bij aanpassen via Sass is de functie quote nodig om de aanhalingstekens rond een string te genereren. Wil je bijvoorbeeld > als scheidingsteken gebruiken, dan kun je dit gebruiken:

SCSS

$breadcrumb-divider: quote(">");

Het is ook mogelijk om een ingesloten SVG-icoon te gebruiken. Pas het toe via onze CSS custom property, of gebruik de Sass-variabele.

Let op

Ingesloten SVG gebruiken

Voor het inline opnemen van SVG als data-URI moeten een paar tekens URL-geëscapet worden, met name <, > en #. Daarom wordt de variabele $breadcrumb-divider door onze Sass-functie escape-svg() gehaald. Gebruik je de CSS custom property, dan moet je je SVG zelf URL-escapen. Lees Kevin Webers uitleg op CodePen voor gedetailleerde informatie over wat je moet escapen.

HTML

<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);" aria-label="kruimelpad">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Bibliotheek</li>
  </ol>
</nav>

SCSS

$breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

Je kunt het scheidingsteken ook verwijderen door --bs-breadcrumb-divider: ''; in te stellen (lege strings in CSS custom properties tellen als waarde), of door de Sass-variabele op $breadcrumb-divider: none; te zetten.

HTML

<nav style="--bs-breadcrumb-divider: '';" aria-label="kruimelpad">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Bibliotheek</li>
  </ol>
</nav>

SCSS

$breadcrumb-divider: none;

Toegankelijkheid

Omdat breadcrumbs navigatie bieden, is het verstandig een betekenisvol label zoals aria-label="kruimelpad" toe te voegen om het soort navigatie in het <nav>-element te beschrijven, en aria-current="page" op het laatste item van de reeks toe te passen om aan te geven dat dat de huidige pagina is.

Zie voor meer informatie het breadcrumb-patroon in de ARIA Authoring Practices Guide.

CSS

Variabelen

Nieuw in v5.2.0

Als onderdeel van Bootstraps groeiende aanpak met CSS-variabelen gebruiken breadcrumbs nu lokale CSS-variabelen op .breadcrumb, voor betere aanpassingen in realtime. De waarden voor de CSS-variabelen worden via Sass ingesteld, dus aanpassen via Sass wordt nog steeds ondersteund.

Standaardwaarden: zie scss/_breadcrumb.scss in de Bootstrap-broncode.

Sass-variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.