Pesmet

Indicați locația paginii curente într-o ierarhie de navigare care adaugă automat separatori prin CSS.

Prezentare generală

Separatoarele sunt adăugate automat în CSS prin ::beforeși content.

<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>

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 .