Pesmet
Indicați locația paginii curente într-o ierarhie de navigare care adaugă automat separatori prin CSS.
Exemplu
<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>
Schimbarea separatorului
Separatoarele sunt adăugate automat în CSS prin ::before
și content
. Ele pot fi modificate prin schimbare $breadcrumb-divider
. Funcția citate este necesară pentru a genera ghilimele în jurul unui șir, așa că dacă doriți >
ca separator, puteți utiliza acest lucru:
$breadcrumb-divider: quote(">");
De asemenea, este posibil să utilizați o pictogramă SVG încorporată base64 :
$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
Separatorul poate fi îndepărtat setând $breadcrumb-divider
la none
:
$breadcrumb-divider: none;
Accesibilitate
Întrucât breadcrumb-urile oferă o navigare, este o idee bună să adăugați o etichetă semnificativă, cum ar fi aria-label="breadcrumb"
să descrie tipul de navigare furnizat în <nav>
element, precum și aria-current="page"
să aplicați un ultimul element al setului pentru a indica faptul că acesta reprezintă pagina curentă.
Pentru mai multe informații, consultați modelul breadcrumb Ghid de practici de autor ARIA .