Conseils
Les fils d’Ariane sont des outils de navigation qui aident les utilisateurs à se situer dans la structure d’un site Web ou d’une application, à comprendre comment ils sont arrivés là et à déterminer comment revenir aux pages précédentes ou aux catégories de niveau supérieur. Ils sont affichés en haut de la page, sous le menu de navigation principal, et sont généralement intégrés aux bannières héroïques. Les fils d’Ariane sont composés des éléments suivants :
- Lien d'accueil : Il s’agit du niveau le plus élevé de la hiérarchie du site. Il est généralement lié à la page d’accueil du site Web.
- Séparateur : Le séparateur sépare les niveaux de la hiérarchie et indique clairement à l’utilisateur que chaque élément du fil d’Ariane représente un niveau différent.
- Élément(s) de la liste du fil d'Ariane : Les éléments représentent les niveaux de la hiérarchie du site que l’utilisateur a parcourus pour arriver à la page actuelle. Chaque élément textuel est cliquable et lié à la page correspondante.
- Page actuelle : Le dernier élément du fil d’Ariane correspond à la page actuelle sur laquelle se trouve l’utilisateur. Il est affiché comme un texte simple et n’est pas cliquable.
Bien qu’il soit recommandé d’utiliser des fils d’Ariane dans vos sites Web et applications, vous pouvez les omettre dans certains cas :
- Flux de travail complexe non linéaire
- Application monopage (SPA)
- Application mobile native (il faut plutôt respecter les schémas propres au système d’exploitation)
- Site Web monopage et site Web comportant peu de niveaux hiérarchiques
- Flux de travail de processus d’application ou de transaction linéaire (pour ne pas perturber la tâche)
- Lorsque l’architecture de l’information est confuse et manque de clarté (dans ce cas, il faut plutôt se concentrer sur l’amélioration de la navigation globale)
Fil d'Ariane
Les fils d’Ariane doivent toujours figurer au haut de la page, sous le menu de navigation principal.
HTML
<nav aria-label="breadcrumb">
<ol class="gnb-breadcrumbs">
<li><a href="#">Accueil</a></li>
<li><a href="#">Deuxième niveau</a></li>
<li><a href="#">Troisième niveau</a></li>
<li class="active" aria-current="page">Page actuelle</li>
</ol>
</nav>
Fil d'Ariane dans les bannières héroïques
Si vous utilisez des fils d’Ariane dans bannières héroïques,
appliquez la classe .gnb-breadcrumbs-light.
HTML
<!-- Pour utilisation sur des arrière-plans sombres -->
<nav aria-label="breadcrumb">
<ol class="gnb-breadcrumbs-light">
<li><a href="#">Accueil</a></li>
<li><a href="#">Deuxième niveau</a></li>
<li><a href="#">Troisième niveau</a></li>
<li class="active" aria-current="page">Page actuelle</li>
</ol>
</nav>