Le fil d’Ariane est la courte série de liens, généralement placée en haut de page, qui montre où se situe la page dans l’arborescence d’un site, par exemple Accueil > Chaussures > Chaussures de running, et permet de remonter d’un niveau en un clic. Un site en a besoin dès qu’il compte plus de deux niveaux de pages, comme une boutique en ligne, un grand site de services ou une base de connaissances ; un petit site à structure plate s’en passe généralement.
Dernière mise à jour : 31 octobre 2026.
Ce guide présente les types de fil d’Ariane, quand ils aident et quand ils encombrent, comment les concevoir pour ordinateur et téléphone, comment les rendre accessibles, comment ils aident les moteurs de recherche et les erreurs à éviter. Il s’adresse aux responsables marketing, product owners et designers qui préparent un nouveau site ou une refonte.
Chez Odduel, une agence créative et technologique installée à Barcelone et à São Paulo, notre service de design UX/UI conçoit la navigation de sites, de boutiques et d’applications. Sur notre propre site, chaque article et chaque étude de cas inscrit un fil d’Ariane dans ses données de page, et chaque article offre un moyen visible de revenir à la liste d’où l’on vient ; les conseils ci-dessous viennent de ce type de travail et valent pour tout site.
En bref : utilisez un fil d’Ariane quand votre site compte trois niveaux ou plus et que les visiteurs arrivent en profondeur depuis la recherche. Montrez le chemin dans la structure, pas l’historique du visiteur ; gardez-le court, en petits caractères en haut de page ; faites de chaque niveau un lien sauf la page en cours ; balisez-le comme repère de navigation pour les lecteurs d’écran et avec des données structurées pour les moteurs. Sur téléphone, affichez le niveau parent ou un fil raccourci plutôt qu’une longue ligne qui passe à la ligne.
Qu’est-ce qu’un fil d’Ariane ?
Le fil d’Ariane est une aide à la navigation secondaire. Il ne remplace pas le menu principal ; il le complète en répondant à deux questions pour le visiteur qui arrive sur une page : où suis-je, et comment rejoindre la rubrique plus large ? Le nom vient du fil qui guida Thésée hors du labyrinthe, mais un bon fil d’Ariane montre la structure du site plutôt que le chemin qu’un visiteur a pris par hasard.
Un fil d’Ariane type se place au-dessus du titre de la page, utilise un petit texte, sépare les niveaux par un symbole comme > ou / et se termine par la page en cours, qui n’est pas un lien.
Quels types de fil d’Ariane existe-t-il ?
Le tableau compare les trois types courants.
| Type | Ce qu’il montre | Exemple | Idéal pour | Points de vigilance |
|---|---|---|---|---|
| Par emplacement | La place de la page dans la structure du site | Accueil > Services > Branding | La plupart des sites, sites de services, bases de connaissances | Pages présentes dans plusieurs rubriques |
| Par attributs | Les attributs ou filtres qui définissent la page | Accueil > Chaussures > Femme > Pointure 38 | Boutiques avec filtres et navigation à facettes | Fils trop longs et adresses dupliquées |
| Par historique | Les pages que le visiteur vient de consulter | Retour aux résultats | Résultats de recherche et listes filtrées | Doublon du bouton retour du navigateur |
La plupart des sites devraient utiliser un fil d’Ariane par emplacement. Les fils par attributs aident dans les boutiques, tant que les combinaisons de filtres ne créent pas des adresses sans fin à explorer pour les moteurs. Les liens par historique, comme « Retour aux résultats », sont utiles sur une fiche produit atteinte depuis une recherche, mais c’est un autre outil qu’un fil d’Ariane.
Quand un site a-t-il besoin d’un fil d’Ariane ?
Le fil d’Ariane trouve sa place quand la structure est assez profonde pour qu’un visiteur puisse perdre ses repères.
- Les boutiques en ligne avec catégories et sous-catégories, où les visiteurs arrivent souvent sur une fiche produit depuis un moteur de recherche.
- Sites de services avec de nombreux services regroupés par domaines.
- Bases de connaissances, documentations et centres d’aide aux sujets imbriqués.
- Blogs et magazines organisés en catégories, où le fil d’Ariane relie un article à sa rubrique.
- Grands sites institutionnels ou publics à plusieurs niveaux de pages.
Il apporte peu sur les petits sites à plat de quelques pages, sur les sites d’une seule page et sur les pages d’atterrissage construites autour d’une seule action, où une série de liens peut détourner l’attention de l’objectif. Pour voir comment la navigation s’inscrit dans le processus de design, consultez notre guide du design UX/UI.
Comment concevoir un fil d’Ariane ?
Un bon fil d’Ariane se repère facilement quand on en a besoin et s’ignore facilement sinon.
- Placez-le en haut, au-dessus du titre de la page et sous la navigation principale, au même endroit sur chaque page.
- Gardez-le petit et discret, plus petit que le texte courant, pour qu’il ne rivalise pas avec le titre.
- Faites de chaque niveau un lien, sauf le dernier. La page en cours s’affiche en texte, pour que le visiteur comprenne où il se trouve.
- Utilisez des séparateurs clairs, comme >, / ou un petit chevron, avec assez d’espace autour.
- Utilisez les vrais noms des pages, raccourcis si besoin, pour que le fil corresponde au menu et aux titres.
- Commencez par Accueil, ou par la rubrique de premier niveau si le logo mène déjà à l’accueil et que la place manque.
- Un seul chemin par page. Si un produit appartient à plusieurs catégories, choisissez-en une principale pour le fil.
Testez le fil avec des personnes qui ne connaissent pas le site. Demandez-leur de trouver un produit ou un article, puis de rejoindre la rubrique à laquelle il appartient, et observez si elles utilisent le fil d’Ariane, le menu ou le bouton retour. Si personne ne remarque le fil, il est peut-être trop discret ; si les niveaux sont mal compris, ce sont les noms des pages ou la structure qu’il faut revoir, pas le fil lui-même.
Comment fonctionne le fil d’Ariane sur mobile ?
Les fils longs passent mal à la ligne sur petit écran et repoussent le titre vers le bas. Solutions courantes :
- N’afficher que le niveau parent, sous la forme d’un seul lien « retour à la rubrique » avec une flèche.
- Tronquer le milieu des fils longs, en gardant le premier et le dernier niveau.
- Laisser le fil défiler latéralement sur une seule ligne, s’il doit rester complet.
Quelle que soit l’option, gardez des zones tactiles assez grandes pour être touchées facilement et testez sur de vrais téléphones.
Comment les boutiques en ligne doivent-elles utiliser le fil d’Ariane ?
C’est dans les boutiques que le fil d’Ariane compte le plus, car la fiche produit est souvent la première page vue. Un acheteur qui arrive sur une seule paire de chaussures de running depuis une recherche a besoin de voir vite le reste de la gamme, et un fil comme Accueil > Chaussures > Chaussures de running le permet en un geste.
- Choisissez une catégorie principale pour chaque produit, pour que le fil reste le même où que le produit soit listé.
- Laissez les filtres hors du fil sauf si la page filtrée est une vraie catégorie indexable avec son propre contenu.
- Associez le fil à un lien « retour aux résultats » quand les visiteurs arrivent depuis une recherche ou une liste filtrée, pour qu’ils retrouvent exactement où ils en étaient.
Notre guide des fonctionnalités d’un site e-commerce présente les autres éléments de navigation dont une boutique a besoin dès le lancement.
Comment rendre un fil d’Ariane accessible ?
Le fil d’Ariane doit être aussi utilisable avec un lecteur d’écran ou un clavier qu’avec une souris. Le modèle de fil d’Ariane du W3C décrit le balisage habituel :
- Un repère de navigation (un élément nav) avec un libellé comme « Fil d’Ariane », pour que les utilisateurs de lecteurs d’écran le trouvent et puissent le passer.
- Une liste ordonnée de liens, qui transmet l’ordre des niveaux.
- La page en cours signalée par l’attribut aria-current réglé sur page, pour qu’elle soit annoncée comme l’emplacement actuel.
- Des séparateurs dessinés en CSS plutôt que tapés comme caractères, pour qu’ils ne soient pas lus à chaque niveau.
- Un contraste suffisant et un focus visible pour le petit texte et les liens.
Notre guide de l’accessibilité des sites web couvre les exigences plus larges applicables en Europe.
Le fil d’Ariane aide-t-il le SEO ?
Le fil d’Ariane aide les moteurs de recherche de deux façons. Ses liens sont des liens internes qui indiquent aux robots comment les pages se rattachent à leurs rubriques. Et les données structurées qui décrivent le fil, avec le type BreadcrumbList, permettent aux moteurs de comprendre la hiérarchie et, dans certains résultats, d’afficher le chemin à la place d’une simple adresse ; Google en décrit le format dans sa documentation sur les données structurées de fil d’Ariane.
Pour cela, le fil doit refléter une structure claire et correspondre aux adresses. Notre article sur les URL optimisées pour le SEO explique comment adresses et structure se soutiennent. Sur un site multilingue, chaque version linguistique doit avoir ses propres noms et adresses dans le fil.
Quelles sont les erreurs courantes sur le fil d’Ariane ?
- Utiliser le fil d’Ariane comme navigation principale. Il complète le menu ; il ne le remplace pas.
- Montrer l’historique du visiteur au lieu de l’emplacement. Cela répète le bouton retour et déroute ceux qui arrivent depuis la recherche.
- Mettre un lien sur la page en cours. Un lien vers la page où l’on se trouve est une impasse.
- Des fils qui ne correspondent pas au menu. Des noms différents pour la même rubrique dans le menu et dans le fil.
- Un fil d’Ariane sur un site à plat. Un fil Accueil > Page n’apporte rien.
- Trop petit ou trop peu contrasté. Un fil difficile à lire ou à toucher sur téléphone.
- Pas de données structurées, ou des données qui ne correspondent pas au fil visible.
Si vous passez en revue un site existant, notre checklist d’audit UX comprend des contrôles de navigation en plus du fil d’Ariane.
Questions fréquentes
Qu’est-ce que le fil d’Ariane sur un site web ?
Le fil d’Ariane est une courte série de liens qui montre où une page se situe dans la structure d’un site, par exemple Accueil > Services > Branding. Il apparaît généralement au-dessus du titre de la page, en petit texte. Chaque niveau sauf la page en cours est un lien, pour remonter d’un clic vers une rubrique plus large.
Le fil d’Ariane aide-t-il le SEO ?
Il aide le SEO indirectement. Ses liens sont des liens internes qui montrent aux moteurs comment les pages se rattachent à leurs rubriques, et les données structurées BreadcrumbList les aident à comprendre la hiérarchie, que certains résultats affichent à la place d’une simple adresse. Il n’améliore pas le classement à lui seul, mais soutient une structure claire et explorable.
Tous les sites doivent-ils avoir un fil d’Ariane ?
Non. Le fil d’Ariane est utile sur les sites de trois niveaux ou plus : boutiques en ligne, grands sites de services, bases de connaissances et blogs organisés par catégorie. Sur les petits sites à structure plate de quelques pages, les sites one-page et les landing pages ciblées, il encombre la page sans aider les visiteurs, et un menu principal clair suffit.
Où placer le fil d’Ariane sur une page ?
Placez-le en haut de la page, sous la navigation principale et au-dessus du titre, au même endroit sur chaque page. Utilisez un texte plus petit que le texte courant pour qu’il ne rivalise pas avec le titre. Sur téléphone, affichez le niveau parent ou un fil raccourci pour que le titre reste visible sans faire défiler.
Comment rendre un fil d’Ariane accessible ?
Placez-le dans un repère de navigation avec un libellé comme « Fil d’Ariane », listez les niveaux dans une liste ordonnée, signalez la page en cours avec l’attribut aria-current, dessinez les séparateurs en CSS pour que les lecteurs d’écran ne les lisent pas, et assurez un bon contraste et un focus visible. Testez au clavier et avec un lecteur d’écran.
Le fil d’Ariane est un petit détail qui rapporte sur tout site ayant de la profondeur : il oriente les visiteurs, soutient l’accessibilité et aide les moteurs à lire votre structure. Découvrez comment notre service de design UX/UI conçoit la navigation, ou parlez-nous de votre projet et nous verrons comment les visiteurs se repèrent sur votre site.
