Fil d’Ariane

Repères hiérarchiques et liens de retour vers les niveaux supérieurs ; le dernier segment est la page courante (sans <code>bj-breadcrumb__link</code>).

Deux niveaux

<nav class="bj-breadcrumb" aria-label="Fil d'Ariane">
  <ol class="bj-breadcrumb__list">
    <li class="bj-breadcrumb__item">
      <a class="bj-breadcrumb__link" href="/">Accueil</a>
    </li>
    <li class="bj-breadcrumb__item" aria-current="page">Démarches</li>
  </ol>
</nav>

Trois niveaux et plus

<nav class="bj-breadcrumb" aria-label="Fil d'Ariane">
  <ol class="bj-breadcrumb__list">
    <li class="bj-breadcrumb__item">
      <a class="bj-breadcrumb__link" href="/">Accueil</a>
    </li>
    <li class="bj-breadcrumb__item">
      <a class="bj-breadcrumb__link" href="/demarches">Démarches</a>
    </li>
    <li class="bj-breadcrumb__item" aria-current="page">Demande</li>
  </ol>
</nav>

Variantes

Dernier item sans lien : texte ou <code>span</code> avec <code>aria-current="page"</code> (comme <code>BjBreadcrumb</code>).

Classes CSS

ClasseDescription
bj-breadcrumbConteneur <code>nav</code>.
bj-breadcrumb__listListe ordonnée <code>ol</code>.
bj-breadcrumb__itemÉlément <code>li</code>.
bj-breadcrumb__linkLien vers un niveau parent.

Accessibilité

Préférez ol pour l’ordre des niveaux ; aria-label sur le nav (ex. « Fil d’Ariane »).