Biloko ya kosala mampa

Lakisa esika ya lokasa ya lelo na kati ya hiérarchie ya navigation oyo ebakisi automatiquement ba séparateurs na nzela ya CSS.

Na lokasa oyo

Ndakisa

Salelá liste oyo ezali na ordre to oyo ezali na ordre te oyo ezali na biloko ya liste oyo ezali na lien mpo na kosala breadcrumb oyo ezali na style moke. Salelá ba utilitaires na biso mpo na kobakisa ba styles mosusu ndenge olingi.

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

Bato oyo bakabolaka

Ba diviseurs ebakisami automatiquement na CSS na nzela ya ::beforempe content. Bakoki kobongwana na kobongola propriété personnalisée ya CSS ya esika --bs-breadcrumb-divider, to na nzela ya $breadcrumb-dividervariable Sass — mpe $breadcrumb-divider-flippedmpo na homologue na yango ya RTL, soki esengeli. Tozali ko défaut na variable na biso ya Sass, oyo etiamaki lokola fallback na propriété personnalisée. Na ndenge oyo, ozui diviseur global oyo okoki ko overrider sans ko recompiler CSS na tango nionso.

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

Ntango ozali kobongola na nzela ya Sass, fonction ya citation esengeli mpo na kobimisa ba citations zingazinga ya molongo moko. Ndakisa, kosalela >lokola mokaboli, okoki kosalela oyo:

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

Ezali mpe na nzela ya kosalela elembo ya SVG oyo ekɔtisami . Salelá yango na nzela ya propriété personnalisée na biso ya CSS, to salelá variable Sass.

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

Okoki mpe kolongola paramètre ya diviseur --bs-breadcrumb-divider: '';(ba chaînes ya pamba na ba propriétés personnalisées ya CSS etangami lokola valeur), to kotiya variable ya Sass na $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;

Kozala na makoki ya kozwa yango

Lokola breadcrumbs epesaka navigation, ezali likanisi malamu kobakisa étiquette ya tina lokola aria-label="breadcrumb"kolimbola lolenge ya navigation oyo epesami na <nav>élément, mpe lisusu kosalela an aria-current="page"na eloko ya suka ya ensemble mpo na kolakisa ete ezali komonisa lokasa ya lelo.

Mpo na koyeba makambo mingi, tala Mimeseno ya Bokomi ya WAI-ARIA mpo na motindo ya kokata mampa .

Sass oyo azali

Ba variables oyo ezali

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