Brödsmula

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='%236c757d'/%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,<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>");

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 ARIA Authoring Practices Guide brödsmulamönster .

CSS

Variabler

Som en del av Bootstraps utvecklande CSS-variabler använder brödsmulor nu lokala CSS-variabler .breadcrumbför förbättrad realtidsanpassning. Värden för CSS-variablerna ställs in via Sass, så Sass-anpassning stöds fortfarande också.

  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
  

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;