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

Sho usay di pej de naw insay wan nevigishɔn hayari we de ad sɛpareta dɛn ɔtomɛtik wan bay CSS.

Na dis pej

Ɛ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='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");

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ɔ, si di WAI-ARIA Authoring Practices fɔ di bredkrɔm patɛn .

Sass we bin de

Di tin dɛn we kin chenj

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