Brödsmula

Ange den aktuella sidans plats i en navigeringshierarki som automatiskt lägger till separatorer via CSS.

På den här sidan

Exempel

Använd en ordnad eller oordnad lista med länkade listobjekt för att skapa en minimalt utformad brödsmula. Använd våra verktyg för att lägga till ytterligare stilar efter önskemål.

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

Avdelare

Avdelare läggs automatiskt till i CSS genom ::beforeoch content. De kan ändras genom att ändra en lokal anpassad CSS-egenskap --bs-breadcrumb-dividereller genom $breadcrumb-dividerSass-variabeln – och $breadcrumb-divider-flippedför dess RTL-motsvarighet, om det behövs. Vi använder som standard vår Sass-variabel, som är inställd som en reserv till den anpassade egenskapen. På så sätt får du en global avdelare som du kan åsidosätta utan att kompilera om CSS när som helst.

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

Vid modifiering via Sass krävs citatfunktionen för att generera citattecken runt en sträng. Om du till exempel använder >som avdelare kan du använda detta:

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

Det är också möjligt att använda en inbäddad SVG-ikon . Använd den via vår anpassade CSS-egenskap eller använd Sass-variabeln.

<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 också ta bort avdelarinställningen --bs-breadcrumb-divider: '';(tomma strängar i anpassade CSS-egenskaper räknas som ett värde), eller ställa in Sass-variabeln till $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;

Tillgänglighet

Eftersom brödsmulor ger en navigering är det en bra idé att lägga till en meningsfull etikett som aria-label="breadcrumb"beskriver typen av navigering som tillhandahålls i <nav>elementet, samt att applicera en aria-current="page"på det sista objektet i uppsättningen för att indikera att den representerar den aktuella sidan.

För mer information, se WAI-ARIA författarpraxis för brödsmulemönstret .

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;