Daabboo

Bakka fuula ammaa sadarkaa qajeelchaa keessaa kan ofumaan adda baastoota karaa CSS dabalu agarsiisi.

Fuula kana irratti

Fakkeenya

Tarree tartiiba qabu ykn hin tartiibamin wantoota tarree walqabsiisan waliin fayyadamii daabboo akkaataa xiqqaa uumuuf. Akka barbaaddetti akkaataa dabalataa itti dabaluuf faayidaa keenya fayyadami.

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

Qoqqoodduu

Qoodtoonni ofumaan CSS keessatti karaa ::beforefi content. Isaan qabeentaa amala CSS naannoo fooyyessuudhaan jijjiiramuu danda'u --bs-breadcrumb-divider, ykn karaa $breadcrumb-dividerjijjiiramaa Sass — fi $breadcrumb-divider-flippedgita isaa RTL tiif, yoo barbaachise. Jijjiiramaa Sass keenyaatti durtii goona, kunis akka kufaatii gara qabeentaa amalaatti saaga. Haala kanaan, qoqqoodduu addunyaa kan yeroo barbaaddetti CSS irra deebitee osoo hin qindeessin irra darbuu dandeessu argatta.

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

Yeroo karaa Sass fooyyessitu, faankishiniin caqasaa caqasoota naannoo tarree tokkoo uumuuf barbaachisaadha. Fakkeenyaaf, >akka qoqqoodduutti fayyadamuun, kana fayyadamuu dandeessa:

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

Akkasumas mallattoo SVG uumame fayyadamuun ni danda'ama . Karaa qabeentaa amala CSS keenyaa hojiirra oolchi, ykn jijjiiramaa Sass fayyadami.

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

Akkasumas qindaa'ina qoqqoodduu haquu dandeessa --bs-breadcrumb-divider: '';(tarreewwan duwwaa qabeentota amala CSS keessatti akka gatiitti lakkaa'amu), ykn jijjiiramaa Sass gara $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;

Dhaqqabummaa

Daabboon naanna'uu waan kennuuf, asxaa hiika qabu kan akka aria-label="breadcrumb"gosa qajeelcha elementii keessatti kenname ibsuu dabaluu <nav>, akkasumas aria-current="page"fuula ammaa bakka bu'uu isaa agarsiisuuf wanta dhumaa tuuta irratti hojii irra oolchuun gaariidha.

Odeeffannoo dabalataaf, Shaakala Barreessuu WAI-ARIA fakkii daabboo .

Sass jedhama

Jijjiiramoota

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