Bredkrɔm we dɛn kin yuz fɔ mek bred

Ɛgzampul

Yuz wan list we dɛn dɔn ɔda ɔ we dɛn nɔ ɔda wit tin dɛn we gɛt link na di list fɔ mek wan bred-krɔm we nɔ gɛt bɛtɛ stayl. Yuz wi yutiliti fɔ ad ɔda stayl dɛn as yu want.

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

Divayda dɛn

Divayda dɛn kin ad ɔtomɛtik wan na CSS tru ::beforeɛn content. Dɛn kin chenj dɛn bay we dɛn chenj wan lokal CSS kɔstɔm prɔpati --bs-breadcrumb-divider, ɔ tru di $breadcrumb-dividerSass vɛriɔbul — ɛn $breadcrumb-divider-flippedfɔ in RTL kɔmpin, if nid de. Wi de difɔlt to wi Sass vɛriɔbul, we dɛn sɛt as fɔl bak to di kɔstɔm prɔpati. Dis we ya, yu kin gɛt wan glob ɔl divayda we yu kin ɔvalayz we yu nɔ rikompayl CSS ɛni tɛm.

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

We yu de modify via Sass, di kot fɛnshɔn nid fɔ jenarayz di kot dɛn we de rawnd wan string. Fɔ ɛgzampul, yuz >as divayda, yu kin yuz dis:

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

I pɔsibul bak fɔ yuz wan SVG aykɔn we dɛn dɔn ɛmbas . Aplay am via wi CSS kɔstɔm prɔpati, ɔ yuz di Sass vɛriɔbul.

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

Yu kin pul di divayda sɛtin bak --bs-breadcrumb-divider: '';(ɛmti string dɛn na CSS kɔstɔm prɔpati dɛn kin kɔnt as valyu), ɔ sɛt di Sass vɛriɔbul to $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;

Di we aw pɔsin kin ebul fɔ go de

Bikɔs bred kram dɛn de gi yu nevigishɔn, i fayn fɔ ad wan lɛbl we gɛt minin lɛk aria-label="breadcrumb"fɔ diskrayb di kayn nevigishɔn we dɛn gi na di <nav>ɛlimɛnt, ɛn bak fɔ yuz wan aria-current="page"to di las tin na di sɛt fɔ sho se i de sho di pej we de naw.

Fɔ no mɔ, luk di ARIA Ɔtorin Praktis Gɛd breadcrumb pattern .

CSS we dɛn kɔl CSS

Di tin dɛn we kin chenj

As pat pan Bootstrap in evolvin CSS variebul aprɔch, breadcrumbs naw de yuz lokal CSS vɛriɔbul dɛn on .breadcrumbfɔ ɛnhans rial-taym kɔstɔmayshɔn. Valyu fɔ di CSS vɛriɔbul dɛn de sɛt via Sass, so Sass kɔstɔmayshɔn stil de sɔpɔt, bak.

  --#{$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 di vayriɔbul dɛn

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