Buruburuba

A’ ye ɲɛ min bɛ yen sisan, o yɔrɔ jira navigatiɔn-yɔrɔ dɔ kɔnɔ min bɛ danfaralanw fara a yɛrɛma CSS fɛ.

Nin ɲɛ in kan

Misaliya

Baara kɛ ni lisi ye min labɛnna walima min ma labɛn ni lisi fɛnw ye minnu bɛ ɲɔgɔn kan walasa ka buruburu dɔ dilan min cogoya ka dɔgɔn. Baara kɛ ni an ka nafamafɛnw ye walasa ka cogoya wɛrɛw fara a kan i n’a fɔ i b’a fɛ cogo min na.

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

Tila-tilabagaw

Tilayɔrɔw bɛ fara u yɛrɛma CSS kan ::beforeni ani content. U bɛ se ka Changé ni sigida CSS ladamu nafolo dɔ ladilanni ye --bs-breadcrumb-divider, walima $breadcrumb-dividerSass fɛn caman sɛgɛsɛgɛli fɛ — ani $breadcrumb-divider-flippeda RTL ɲɔgɔndan kama, ni mago bɛ a la. An bɛ default (dafalen) Kɛ an ka Sass variable (dafalen) ye, o min bɛ Sìgi i n’a fɔ fallback (fɔli) ka Kɛ custom property (laada-yɔrɔ) ye. O cogo la, i bɛ diɲɛ tilayɔrɔ sɔrɔ min bɛ se ka wuli ka bɔ a nɔ na k’a sɔrɔ i ma CSS lajɛ kokura waati o waati.

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

Ni bεε bε bεn Sass fɛ, quotation (daɲɛw) baarakɛcogo de wajibiyalen don ka quotes (daɲɛw) Labɔ sɛrɛ dɔ lamini na. Misali la, baara kɛli >i n’a fɔ tilayɔrɔba, i bɛ se ka baara kɛ ni nin ye:

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

A fana bɛ se ka baara kɛ ni SVG taamasiyɛn ye min bɛ don a kɔnɔ . Aw bɛ a waleya an ka CSS custom property fɛ, walima ka baara kɛ ni Sass variable ye.

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

Aw bɛ se fana ka tilayɔrɔba sigicogo bɔ --bs-breadcrumb-divider: '';(sɛbɛn lankolonw CSS ladamucogo la, olu jate bɛ kɛ nafa ye), walima ka Sass sɛgɛsɛgɛli kɛ $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;

Seko ni dɔnko

Komin buruburuw bɛ navigatiɔn Di, a ka ɲi ka taamasiyɛn kɔrɔ dɔ Fàra a kan i n’a fɔ aria-label="breadcrumb"ka navigatiɔn sugu min Dilen bɛ <nav>element (yɔrɔ) la o ɲɛfɔ, ka Fàra an (fɔlikan) aria-current="page"kan ka Kɛ set (yɔrɔ) fɛn laban ye walasa k’a Jira ko a bɛ ɲɛ min bɛ yen sisan, o jira.

Walasa ka kunnafoni wɛrɛw sɔrɔ, aw ye WAI-ARIA Sɛbɛnni kɛcogo lajɛ buruburu cogoya kan .

Sass ye

Yɛlɛma-yɛlɛmaw

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