Brødkrumme

Angiv den aktuelle sides placering i et navigationshierarki, der automatisk tilføjer separatorer via CSS.

På denne side

Eksempel

Brug en ordnet eller uordnet liste med linkede listeelementer til at skabe en minimalistisk stilet brødkrumme. Brug vores hjælpeprogrammer til at tilføje yderligere stilarter efter ønske.

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

Afdelere

Opdelere tilføjes automatisk i CSS gennem ::beforeog content. De kan ændres ved at ændre en lokal CSS-tilpasset egenskab --bs-breadcrumb-dividereller gennem $breadcrumb-dividerSass-variablen - og $breadcrumb-divider-flippedfor dens RTL-modstykke, hvis det er nødvendigt. Vi bruger som standard vores Sass-variabel, som er indstillet som en reserve til den tilpassede egenskab. På denne måde får du en global divider, som du til enhver tid kan tilsidesætte uden at genkompilere CSS.

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

Når du ændrer via Sass, kræves citatfunktionen for at generere anførselstegnene omkring en streng. For eksempel ved at bruge >som skillevæg, kan du bruge dette:

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

Det er også muligt at bruge et indlejret SVG-ikon . Anvend det via vores tilpassede CSS-egenskab, eller brug Sass-variablen.

<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");

Du kan også fjerne divider-indstillingen --bs-breadcrumb-divider: '';(tomme strenge i tilpassede CSS-egenskaber tæller som en værdi), eller indstille Sass-variablen til $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;

Tilgængelighed

Da brødkrummer giver en navigation, er det en god idé at tilføje en meningsfuld etiket, som f.eks. aria-label="breadcrumb"beskriver typen af navigation i <nav>elementet, samt at anvende en aria-current="page"på det sidste element i sættet for at angive, at det repræsenterer den aktuelle side.

For mere information, se WAI-ARIA Authoring Practices for brødkrummemønsteret .

Sass

Variabler

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