Abolomegba

Kpɔɖeŋu

Zã xexlẽdzesi si woɖo ɖe ɖoɖo nu alo esi womeɖo ɖe ɖoɖo nu o kple xexlẽdzesi siwo do ƒome kplii nàtsɔ awɔ abolomegba si ƒe atsyã le sue wu. Zã míaƒe dɔwɔnuwo nàtsɔ akpe ɖe atsyã bubuwo ŋu alesi nèdi.

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

Amewo mamãnuwo

Wotsɔa mamawo kpena ɖe CSS me le wo ɖokui si to ::beforekple content. Woateŋu atrɔ wo to asitɔtrɔ le teƒea ƒe CSS ƒe nɔnɔme tɔxɛ aɖe ŋu --bs-breadcrumb-divider, alo to $breadcrumb-dividerSass ƒe tɔtrɔ me — kple $breadcrumb-divider-flippedna eƒe RTL tɔ, ne ehiã. Míewɔa míaƒe Sass tɔtrɔ, si woɖo abe fallback na custom property la ene. To mɔ sia dzi la, àkpɔ xexeame katã ƒe mama si nàte ŋu axe mɔ ɖe enu evɔ màgaƒo CSS nu ƒu ake ɣesiaɣi o.

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

Ne wole tɔtrɔm to Sass dzi la, wobia tso nyayɔyɔ ƒe dɔwɔwɔ si be wòawɔ nyayɔyɔ siwo ƒo xlã ka aɖe. Le kpɔɖeŋu me, ne èzã >abe mama ene la, àte ŋu azã esia:

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

Ateŋu adzɔ hã be woazã SVG ƒe dzesi si wotsɔ de eme . Zãe to míaƒe CSS custom property dzi, alo zã Sass ƒe tɔtrɔ.

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

Àteŋu aɖe mama ƒe ɖoɖoa hã ɖa --bs-breadcrumb-divider: '';(ka ƒuƒlu siwo le CSS ƒe nɔnɔme tɔxɛwo me la bua wo abe asixɔxɔ ene), alo nàɖo Sass ƒe tɔtrɔ ɖe $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;

Mɔnukpɔkpɔwo ƒe Mɔnukpɔkpɔ

Esi wònye be abolomegbawo naa mɔfiame ta la, anyo be nàtsɔ dzesideŋkɔ si ŋu gɔmesese le akpe ɖe eŋu abe alesi aria-label="breadcrumb"nàɖɔ mɔfiame ƒomevi si wona le <nav>element la me ene, eye nàzã an aria-current="page"ɖe nu mamlɛtɔ si le ƒuƒoƒoa me ŋu atsɔ afia be etsi tre ɖi na axa si li fifia.

Ne èdi nyatakaka bubuwo la, kpɔ ARIA ƒe Agbalẽŋɔŋlɔ ƒe Nuwɔnawo Ŋuti Mɔfiamegbalẽa abolomegba ƒe nɔnɔme .

CSS ƒe ƒuƒoƒo

Nusiwo trɔna

Abe Bootstrap ƒe CSS tɔtrɔwo ƒe mɔnu si le tɔtrɔm ƒe akpa aɖe ene la, abolomegbawo zãa teƒea ƒe CSS tɔtrɔwo le fifia .breadcrumbhena ɣeyiɣi ŋutɔŋutɔ ƒe tɔtrɔwɔwɔ si nyo ɖe edzi. Woɖo asixɔxɔwo na CSS ƒe tɔtrɔwo to Sass dzi, eyata Sass ƒe tɔtrɔwɔwɔ gakpɔtɔ doa alɔ, hã.

  --#{$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 ƒe tɔtrɔwo

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