broodkruimel

Geef de locatie van de huidige pagina aan binnen een navigatiehiërarchie die automatisch scheidingstekens toevoegt via CSS.

Op deze pagina

Voorbeeld

Gebruik een geordende of ongeordende lijst met gekoppelde lijstitems om een broodkruimel met minimale stijl te maken. Gebruik onze hulpprogramma's om naar wens extra stijlen toe te voegen.

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

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

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

Verdelers

Scheidingslijnen worden automatisch toegevoegd in CSS via ::beforeen content. Ze kunnen worden gewijzigd door een lokale aangepaste CSS-eigenschap aan te passen --bs-breadcrumb-divider, of via de $breadcrumb-dividerSass-variabele - en $breadcrumb-divider-flippedvoor zijn RTL-tegenhanger, indien nodig. We gebruiken standaard onze Sass-variabele, die is ingesteld als een terugval op de aangepaste eigenschap. Op deze manier krijgt u een globale scheidingslijn die u kunt overschrijven zonder CSS op elk moment opnieuw te compileren.

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

Bij het wijzigen via Sass is de functie aanhalingstekens vereist om de aanhalingstekens rond een string te genereren. Als u bijvoorbeeld >als scheidingslijn gebruikt, kunt u dit gebruiken:

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

Het is ook mogelijk om een ingebed SVG-pictogram te gebruiken . Pas het toe via onze aangepaste CSS-eigenschap of gebruik de Sass-variabele.

<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='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

$breadcrumb-divider: url("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='currentColor'/%3E%3C/svg%3E");

U kunt ook de scheidingstekeninstelling verwijderen --bs-breadcrumb-divider: '';(lege tekenreeksen in aangepaste CSS-eigenschappen tellen als een waarde) of de Sass-variabele instellen op $breadcrumb-divider: none;.

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

$breadcrumb-divider: none;

Toegankelijkheid

Aangezien breadcrumbs een navigatie bieden, is het een goed idee om een zinvol label toe te voegen, bijvoorbeeld aria-label="breadcrumb"om het type navigatie in het <nav>element te beschrijven, en om een aria-current="page"op het laatste item van de set toe te passen om aan te geven dat het de huidige pagina vertegenwoordigt.

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

Sass

Variabelen

$breadcrumb-font-size:              null;
$breadcrumb-padding-y:              0;
$breadcrumb-padding-x:              0;
$breadcrumb-item-padding-x:         .5rem;
$breadcrumb-margin-bottom:          1rem;
$breadcrumb-bg:                     null;
$breadcrumb-divider-color:          $gray-600;
$breadcrumb-active-color:           $gray-600;
$breadcrumb-divider:                quote("/");
$breadcrumb-divider-flipped:        $breadcrumb-divider;
$breadcrumb-border-radius:          null;