Borotho bja go kgaola
Bontšha lefelo la letlakala la bjale ka gare ga tatelano ya go sepelasepela yeo ka go iketla e oketšago dikaroganyo ka CSS.
Mohlala
<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>
Go fetola karoganyo
Dikaroganyo di tlaleletšwa ka go iketla ka go CSS ka ::before
le content
. Di ka fetolwa ka go fetola $breadcrumb-divider
. Mošomo wa ditsopolwa o a nyakega go tšweletša ditsopolwa go dikologa thapo, ka fao ge o nyaka >
bjalo ka karoganyo, o ka šomiša se:
$breadcrumb-divider: quote(">");
Gape go a kgonega go diriša leswao la SVG leo le tsentšwego la base64 :
$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
Searoganyi se ka tlošwa ka go beakanya $breadcrumb-divider
go none
: .
$breadcrumb-divider: none;
Phihlelelo
Ka ge di-breadcrumb di fa go sepelasepela, ke kgopolo ye botse go oketša leina leo le nago le mohola go swana le aria-label="breadcrumb"
go hlaloša mohuta wa go sepelasepela wo o filwego ka go <nav>
elemente, gammogo le go diriša aria-current="page"
go ya go selo sa mafelelo sa sete go laetša gore e emela letlakala la bjale.
Bakeng sa tshedimošo ye ntši, bona ARIA Authoring Practices Guide paterone ya breadcrumb .