Fil d'Ariane – Breadcrumbs

Le fil d’Ariane permet d’aiguiller l’utilisateur dans son parcours en représentant la hiérarchie de l’information qu’il consulte actuellement.

Vue d’ensemble

Code

= dsfr_breadcrumbs do |b|
  = b.with_breadcrumb label: "Accueil", href: "#"
  = b.with_breadcrumb label: "Section 1", href: "#"
  = b.with_breadcrumb label: "Sous-section 2", href: "#"
  = b.with_breadcrumb label: "Cette page"

Résultat

<nav class="fr-breadcrumb" aria-label="vous êtes ici :" role="navigation">
  <button
      class="fr-breadcrumb__button"
      aria-expanded="false"
      aria-controls="breadcrumbs">
    Voir le fil d’Ariane
  </button>
  <div class="fr-collapse" id="breadcrumbs">
    <ol class="fr-breadcrumb__list">
      <li>
        <a class="fr-breadcrumb__link" href="#">
          Accueil
        </a>
      </li>
      <li>
        <a class="fr-breadcrumb__link" href="#">
          Section 1
        </a>
      </li>
      <li>
        <a class="fr-breadcrumb__link" href="#">
          Sous-section 2
        </a>
      </li>
      <li>
        <a class="fr-breadcrumb__link" aria-current="true">
          Cette page
        </a>
      </li>
    </ol>
  </div>
</nav>

Plus d’informations