# Fil d’Ariane

Le bloc **Fil d’Ariane** affiche le chemin de l’accueil à la page lue. Cette page décrit le chemin qu’il montre, ses réglages de séparateur et de libellés, l’habillage de ses étapes et son comportement au lecteur d’écran.

## Ajouter le bloc

Insérez le bloc **Fil d’Ariane** ([Ajouter un bloc](https://lovelyrender.com/fr/documentation/ajouter-un-bloc/)). Sa place habituelle est le gabarit d’un type de contenu, au-dessus du titre : il montre alors le chemin du contenu que le gabarit affiche ([Décider de l’apparence avec les gabarits](https://lovelyrender.com/fr/documentation/gabarits/)). Le site calcule le chemin d’après la hiérarchie de vos pages.

Le fil est une rangée, disposée dans son panneau **Mise en page flex**. Il contient deux blocs, l’étape et le séparateur, que vous habillez une fois pour tout le chemin.

## Le chemin affiché

- Sur une page ou un contenu, le fil montre l’accueil, chaque page parente, puis le contenu lu. L’étape de l’accueil porte le nom de votre site, sauf si vous lui donnez un libellé.
- Quand un type de contenu a une page de liste, cette liste fait partie du chemin, nommée comme le type : « Atelier Sauge › Articles › Mon article ». Sur la liste elle-même, le fil montre « Atelier Sauge › Articles ».
- Sur un site en plusieurs langues, l’étape de la liste mène à la liste dans la langue de la page lue.
- Le fil n’affiche rien sur l’accueil, sur une page de résultats de recherche ni quand le chemin n’a qu’une étape. Une page sans titre ni libellé ne prend pas de place dans le chemin.

## Régler le séparateur

Sélectionnez le bloc **Fil d’Ariane**, onglet **Réglages**, panneau **Séparateur**.

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Utiliser une icône comme séparateur** | Remplace le caractère par une icône, choisie dans **Icône de séparateur**. Tant qu’aucune icône n’est choisie, le caractère reste affiché. | Désactivé |
| **Séparateur** | Le caractère entre deux étapes : du texte simple, un caractère ou un peu de HTML. La rangée **Séparateurs rapides** propose onze caractères en un clic, de › à •. | › |
| **Icône de séparateur** | L’icône entre deux étapes, choisie dans le sélecteur d’icônes ([Icône](https://lovelyrender.com/fr/documentation/bloc-icone/)). Avec **Utiliser une icône comme séparateur**. | Aucune |

![Le panneau Séparateur du fil d’Ariane, sous le champ Nom de la région : Utiliser une icône comme séparateur désactivé, la rangée des séparateurs rapides avec › sélectionné et le champ Séparateur.](https://static.lovelyrender.com/uploads/2026/10/926-doc-blocs2-fil-d-ariane.png)

## Régler les étapes

Le panneau **Entrées et libellés** règle ce que le fil affiche.

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Afficher l’accueil** | Désactivé, l’étape de l’accueil disparaît du fil. | Activé |
| Un champ par étape | Le libellé de l’étape dans le fil. Vide, l’étape garde le titre de la page. Les mentions « (accueil) » et « (actuelle) » repèrent l’accueil et la page lue. | Vide |

Les libellés que vous écrivez passent dans le fil d’Ariane que Google lit dans vos pages. Ceux du bloc posé dans la page comptent d’abord. Pour les étapes qu’il ne réécrit pas, ce sont ceux du bloc de son gabarit, de celui de l’accueil et de celui de la liste.

**Conseil :** Pour renommer la liste d’un type, sélectionnez le fil dans le gabarit de la liste puis dans celui des contenus du type. Écrivez le nom voulu dans le champ de l’étape qui porte le nom du type.

Dans un gabarit, le fil affiche un chemin d’exemple : l’accueil, la liste du type quand il en a une, puis la page. Il vous sert à habiller le fil sans page réelle. Sur le site, le fil affiche la hiérarchie réelle.

## Habiller le fil

| Bloc | Rôle | États |
| --- | --- | --- |
| **Fil d’Ariane** | Le chemin entier. | **Par défaut**, **Survol** |
| **Étape du fil d’Ariane** | Une étape. Chaque page du chemin s’affiche avec elle, la page lue dans son état **Actif**. | **Par défaut**, **Survol**, **Focus**, **Actif** |
| **Séparateur du fil d’Ariane** | La marque entre deux étapes, répétée entre chaque page. Son caractère se règle sur le fil, son allure sur ce bloc. | **Par défaut** |

Dans l’éditeur, la première étape et le séparateur qui la suit sont ces deux blocs. Les autres en sont des copies : cliquer sur l’une sélectionne le bloc qu’elle copie. Vous ne pouvez ni retirer ni ajouter de bloc dans le fil.

Une étape porte le style enregistré **Étape du fil d’Ariane** : votre couleur principale, votre couleur secondaire et un soulignement au survol et au focus. La page lue prend la couleur du texte qui entoure le fil, sans soulignement. Le séparateur porte le style **Séparateur du fil d’Ariane**, une teinte atténuée du texte. L’étape n’a pas de couleur des liens dans son panneau **Couleurs** : elle est elle-même un lien.

La partie **Fil d’Ariane** du catalogue de design donne une allure à tous les fils du site : **Simple**, **Souligné**, **Discret** ou **Pastilles** ([Adopter un design du catalogue](https://lovelyrender.com/fr/documentation/catalogue-de-design/)).

**Conseil :** Pour faire ressortir la page lue, sélectionnez l’étape, choisissez l’état **Actif** dans l’onglet **Styles** et passez sa graisse en gras : seule la dernière étape change.

## Sur téléphone

Le fil est une rangée. Pour qu’un long chemin passe à la ligne au lieu de déborder, activez **Passage à la ligne** dans son panneau **Mise en page flex** ([Conteneur](https://lovelyrender.com/fr/documentation/bloc-conteneur/)). Ce réglage se fait écran par écran.

## Accessibilité

- Le fil est annoncé comme une zone de navigation nommée **Fil d’Ariane**. Le champ **Nom de la région**, en haut de l’onglet **Réglages**, remplace ce nom. Vide, le fil garde le sien, affiché en grisé dans le champ.
- La page lue n’est pas un lien : elle s’affiche comme un texte et un lecteur d’écran l’annonce comme la page en cours.
- Les séparateurs sont cachés aux lecteurs d’écran, qui ne lisent que les étapes.

## Voir aussi

- [Décider de l’apparence avec les gabarits](https://lovelyrender.com/fr/documentation/gabarits/)
- [Navigation entre contenus](https://lovelyrender.com/fr/documentation/bloc-navigation-contextuelle/)
- [Régler le référencement d’une page](https://lovelyrender.com/fr/documentation/referencement/)