Imvuthuluka yesinkwa
Bonisa indawo yekhasi lamanje phakathi kwesigaba sokuhamba esingeza izihlukanisi ngokuzenzakalelayo nge-CSS.
Isibonelo
<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>
Ukushintsha isihlukanisi
Izihlukanisi zengezwa ngokuzenzakalelayo ku-CSS nge- ::before
. content
Zingashintshwa ngokushintsha $breadcrumb-divider
. Umsebenzi wokucaphuna uyadingeka ukukhiqiza izingcaphuno ezizungeze intambo, ngakho-ke uma ufuna >
njengesihlukanisi, ungasebenzisa lokhu:
$breadcrumb-divider: quote(">");
Kungenzeka futhi ukusebenzisa isithonjana se-SVG esishumekiwe se-base64 :
$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
Isihlukanisi singasuswa ngokusethela $breadcrumb-divider
ku- none
:
$breadcrumb-divider: none;
Ukufinyeleleka
Njengoba i-breadcrumbs ihlinzeka ngokuzulazula, kuwumqondo omuhle ukwengeza ilebula enengqondo njengokuchaza aria-label="breadcrumb"
uhlobo lokuzulazula olunikezwe <nav>
kusici, kanye nokusebenzisa aria-current="page"
okuthi entweni yokugcina yesethi ukukhombisa ukuthi imele ikhasi lamanje.
Ukuze uthole ulwazi olwengeziwe, bona I- ARIA Authoring Practices Guide iphethini ye-breadcrumb .