Breadcrumb (Fil d’Ariane)

Le fil d’Ariane (ou chemin de miettes, breadcrumb en anglais) est un élément de navigation qui se présente sous la forme d’une arborescence des rubriques traversées. Il décrit le chemin qui sépare la page actuelle de la racine du site. Chaque élément du fil d’Ariane est un lien qui permet aux utilisateurs d’accéder plus facilement à une page intermédiaire. De plus, ces liens améliorent le référencement naturel grâce à une exposition du maillage interne aux moteurs de recherche.

Usage

• Le fil d’Ariane aide les utilisateurs à se retrouver sur le site.
• Il se trouve généralement en haut de page, sous la bannière ou sous le menu principal.
• Les différents éléments formant le chemin sont affichés sur une ligne avec un séparateur qui permet d’identifier la hiérarchie entre les pages.
• Si nécessaire, il peut s’afficher sur plusieurs lignes.
• Le 1er lien est celui vers la page d’accueil puis, plus on va vers la droite, plus on accède à un niveau profond de l’organisation du site.
• Le fil d’Ariane est un élément important pour le référencement naturel :
  • il simplifie la navigation au sein du site,
  • il optimise le maillage interne,
  • comme pour les utilisateurs, il aide les moteurs de recherche à comprendre la structure du site.

Bonnes pratiques

• Le fil d’Ariane doit être présent sur toutes les pages du site (hors page d’accueil).
• C’est une fonctionnalité supplémentaire qui ne doit pas remplacer la navigation primaire.

Style & code

Le « Fil d’Ariane » consiste en une simple liste HTML avec des liens dans chaque <li> (excepté pour le dernier élément s’il s’agit de la page en cours), affichée horizontalement avec des séparateurs.

Standard

Pour construire ce composant il suffit de créer, dans une balise <nav>, une liste avec la classe su-breadcrumb sur le <ol> et de mettre des liens dans les <li>. Cette liste peut être construite indifféremment avec la balise <ul> ou la balise <ol>, il s’agit juste d’un point de vue sémantique : la liste comporte-t-elle une notion d’ordonnancement ? Si oui, préférez <ol>…

Il y a des cas où le le fil d’Arianne affiche en dernier élément la page actuelle (pour une page de liste d’articles) et des cas où cette page n’est pas présente (par exemple pour les pages d’article). Si la page actuelle est affichée, ce dernier élément n’est bien sûr pas un lien.

<nav>
    <ul class="su-breadcrumb">
        <li><a href="javascript:;">Accueil</a></li>
        <li><a href="javascript:;">Économie</a></li>
        <li><a href="javascript:;">Tourisme</a></li>
        <li>Bretagne</li>
    </ul>
</nav>

Cas sans la page en cours de consultation :

<nav>
    <ul class="su-breadcrumb">
        <li><a href="javascript:;">Accueil</a></li>
        <li><a href="javascript:;">Économie</a></li>
        <li><a href="javascript:;">Tourisme</a></li>
        <li><a href="javascript:;">Bretagne</a></li>
    </ul>
</nav>

Version sur fond foncé

Pour passer ce composant sur un fond foncé, ajoutez la classe su-negative sur un parent ou à côté du .su-breadcrumb.

<nav style="background: DimGray; padding: 10px">
    <ul class="su-breadcrumb su-negative">
        <li><a href="javascript:;">Accueil</a></li>
        <li><a href="javascript:;">Économie</a></li>
        <li><a href="javascript:;">Tourisme</a></li>
        <li>Bretagne</li>
    </ul>
</nav>