Iqhekeza lesonka

Bonisa indawo yephepha langoku ngaphakathi koluhlu lolawulo lolwandle olongeza ngokuzenzekelayo izahluli ngeCSS.

Umzekelo

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

Ukutshintsha isahluli

Izahluli zongezwa ngokuzenzekelayo kwiCSS ::beforenge content. Zinokutshintshwa ngokutshintsha $breadcrumb-divider. Umsebenzi wocaphulo uyafuneka ukuvelisa ucaphulo olujikeleze umtya, ke ukuba ufuna >njenge-seperator, ungasebenzisa oku:

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

Kuyenzeka kwakhona ukusebenzisa i- base64 embedded SVG icon :

$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

Umahluli unokususwa ngokumisela $breadcrumb-dividerku none:

$breadcrumb-divider: none;

Ukufikeleleka

Kuba i-breadcrumbs ibonelela ngokujonga, luluvo oluhle ukongeza ileyibhile enentsingiselo efana aria-label="breadcrumb"nokuchaza uhlobo lokukhangela olunikezelweyo <nav>kwinto, kunye nokusebenzisa into aria-current="page"yokugqibela yeseti ukubonisa ukuba imele iphepha langoku.

Ngolwazi oluthe kratya, bona i- WAI-ARIA yokuBhalisa ipateni ye-breadcrumb .