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.

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>

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.

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>

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.

Kosalela SVG oyo ekɔtisami na kati

Inlining SVG lokola URI ya ba données esengi URL kokima mwa bilembo, mingi mingi <, >mpe #. Yango wana $breadcrumb-dividervariable eleki na escape-svg()fonction na biso ya Sass . Ntango ozali kosalela propriété personnalisée ya CSS, esengeli o URL kokima SVG na yo yo moko. Tanga bandimbola ya Kevin Weber na CodePen mpo na koyeba makambo ya sikisiki na ntina ya nini okoki kokima.

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

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

Kozala na makoki ya kozwa yango

Lokola ba miettes ya mapa 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 anaria-current="page" na eloko ya suka ya ensemble mpo na kolakisa ete ezali komonisa lokasa ya lelo.

Mpo na koyeba makambo mingi, tala Buku ya Mimeseno ya Bokomi ya ARIA motindo ya kokata mampa .

CSS

Ba variables oyo ezali

Ebakisami na v5.2.0

Lokola eteni ya approche ya ba variables CSS oyo ezali ko évoluer ya Bootstrap, ba breadcrumbs esalela sikoyo ba variables CSS locales na .breadcrumbpona personnalisation ya temps réel oyo ematisami. Ba valeurs pona ba variables ya CSS etiamaki na nzela ya Sass, yango wana personnalisation ya Sass ezali kaka kosungama, pe.

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

Ba variables ya Sass

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