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-dividerla 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 Practicile de creație WAI-ARIA pentru modelul breadcrumb .