Brout

Gitt d'Positioun vun der aktueller Säit an enger Navigatiounshierarchie un déi automatesch Separatoren iwwer CSS bäidréit.

Op dëser Säit

Beispill

Benotzt eng bestallt oder net bestallt Lëscht mat verlinkte Lëschteartikele fir e minimal stylesch Broutkummer ze kreéieren. Benotzt eis Utilities fir zousätzlech Stiler ze addéieren wéi Dir wëllt.

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

Dividers

Dividers ginn automatesch an CSS dobäigesat duerch ::beforean content. Si kënne geännert ginn andeems Dir eng lokal CSS Custom Property ännert --bs-breadcrumb-divider, oder duerch d' $breadcrumb-dividerSass Variabel - a $breadcrumb-divider-flippedfir seng RTL Géigespiller, wann néideg. Mir Standard op eis Sass Variabel, déi als Réckfall op déi personaliséiert Eegeschafte gesat gëtt. Op dës Manéier kritt Dir e globalen Divider deen Dir kënnt iwwerschreiden ouni CSS zu all Moment ze kompiléieren.

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

Wann Dir iwwer Sass ännert, ass d' Zitatfunktioun erfuerderlech fir d'Zitater ronderëm eng String ze generéieren. Zum Beispill, benotzt >als Divider, kënnt Dir dëst benotzen:

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

Et ass och méiglech eng embedded SVG Ikon ze benotzen . Benotzt et iwwer eis CSS Custom Property, oder benotzt d'Sass Variabel.

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

Dir kënnt och d'Divisiounsastellung ewechhuelen --bs-breadcrumb-divider: '';(eidel Strings an CSS Custom Properties zielen als Wäert), oder d'Sass Variabel op setzen $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;

Accessibilitéit

Zënter Broutkrummelen eng Navigatioun ubidden, ass et eng gutt Iddi fir e sënnvoll Label ze addéieren, sou wéi aria-label="breadcrumb"d'Aart vun der Navigatioun, déi am <nav>Element geliwwert gëtt, ze beschreiwen, wéi och en aria-current="page"op de leschten Element vum Set applizéiert fir unzeweisen datt et déi aktuell Säit duerstellt.

Fir méi Informatioun, kuckt d' WAI-ARIA Authoring Practices fir de Breadcrumb Muster .

Sass

Variablen

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