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.

html

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

html

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

Benotzt embedded SVG

Inlining SVG als Daten URI erfuerdert d'URL e puer Zeechen ze entkommen, virun allem <, >an #. Dofir gëtt d' $breadcrumb-dividerVariabel duerch eis escape-svg()Sass Funktioun weidergeleet . Wann Dir d'CSS personaliséiert Eegeschafte benotzt, musst Dir Är SVG eleng URL entkommen. Liest dem Kevin Weber seng Erklärungen op CodePen fir detailléiert Informatiounen iwwer wat ze flüchten.

html

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

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

html

<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' ARIA Authoring Practices Guide Breadcrumb Muster .

CSS

Variablen

Dobäi an v5.2.0

Als Deel vum Bootstrap's evoluéierende CSS Variablen Approche benotzen Broutkrummelen elo lokal CSS Variablen op .breadcrumbfir eng verstäerkte Echtzäit Personnalisatioun. Wäerter fir d'CSS Variablen ginn iwwer Sass gesat, sou datt Sass Personnalisatioun och nach ëmmer ënnerstëtzt gëtt.

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