Panpeceto
Indiku la lokon de la aktuala paĝo ene de navigacia hierarkio, kiu aŭtomate aldonas apartigilojn per CSS.
Ekzemplo
<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>
Ŝanĝi la apartigilon
Apartigiloj estas aŭtomate aldonitaj en CSS per ::before
kaj content
. Ili povas esti ŝanĝitaj per ŝanĝado $breadcrumb-divider
. La citaĵofunkcio necesas por generi la citaĵojn ĉirkaŭ ĉeno, do se vi volas >
kiel apartigilon, vi povas uzi ĉi tion:
$breadcrumb-divider: quote(">");
Ankaŭ eblas uzi base64 enigitan SVG-ikonon :
$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
La apartigilo povas esti forigita per agordo $breadcrumb-divider
al none
:
$breadcrumb-divider: none;
Alirebleco
Ĉar panpecetoj provizas navigadon, estas bona ideo aldoni signifan etikedon kiel aria-label="breadcrumb"
priskribi la specon de navigado provizita en la <nav>
elemento, kaj ankaŭ apliki aria-current="page"
al la lasta elemento de la aro por indiki ke ĝi reprezentas la nunan paĝon.
Por pliaj informoj, vidu la Gvidilon pri Praktikoj pri Aŭtorado de ARIA .