Abolomegba

Fia afi si axa si li fifia le le mɔfiamewo ƒe ɖoɖo aɖe si tsɔa mamãnuwo kpena ɖe eŋu le eɖokui si to CSS dzi la me.

Le axa sia dzi

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>

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

À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ɔ WAI-ARIA ƒe Agbalẽŋɔŋlɔ ƒe Nuwɔnawo hena abolomegba ƒe nɔnɔme .

Sass ƒe nyawo

Nusiwo trɔna

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