Fil d'Ariane
Le fil d’Ariane est essentiel sur les sites où les pages sont organisées hiérarchiquement, tels que les sites d'information, de commerce électronique et de dossiers en ligne.
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Variantes disponibles
Le fil d’Ariane se décline en deux variantes :
- Format bureau
- Format mobile
Quand l’utiliser
Le fil d'Ariane est essentiel sur les sites où les pages sont organisées hiérarchiquement, tels que les sites d'information, de commerce électronique et de dossiers en ligne.
Quand ne pas l’utiliser
Il est préférable d'inclure systématiquement le fil d'Ariane, sauf dans des cas spécifiques où aucune référence hiérarchique n'est requise. Son utilisation est déconseillée pour les navigations non linéaires, les contenus reposant sur des choix, les outils interactifs sans ordre spécifique, ainsi que les navigations axées sur des filtres de recherche.
Anatomie
- Liens
- Chevrons
- Page courante
- Ellipse
- Sous-menu
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Liens
Construits à partir des titres principaux des pages.
Prévoir un titre de navigation alternatif pour les longs titres.
Seul le niveau parent de la page consultée est affiché en format mobile.
Ellipse et sous-menu
En mode bureau, lorsque la page visitée dépasse le 5e niveau, seuls les 2 premiers et les 2 derniers niveaux sont visibles. Une ellipse est alors utilisée pour masquer les niveaux intermédiaires. La section « Comportements » renferme tous les détails concernant cette utilisation.
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans la trousse de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Fil d’Ariane
Positionnement et alignement : Placé à 16 px sous le bandeau d’en-tête du PIV ou du menu de navigation principale, le cas échéant.
Dimensions : La largeur maximale est de 825 px. Devrait se limiter à une seule ligne.
Sous-menu
Positionnement et alignement : Positionné directement sous l’ellipse, aligné à gauche par défaut.
Dimensions : La largeur du sous-menu peut être adaptée à son contenu, cependant, elle doit respecter une limite maximale de 296 px.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Liens
Les libellés de pages du fil d’Ariane sont interactifs, à l’exception de la page en cours.
Ellipse et sous-menu
En cliquant sur l’ellipse, les niveaux masqués du fil d’Ariane s’affichent dans un sous-menu. Pour refermer ce sous-menu, il suffit de cliquer à nouveau sur l’ellipse ou en dehors de celui-ci.
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris :
- Les utilisateurs peuvent cliquer sur un lien de page du fil d’Ariane.
- Les séparateurs entre les liens des pages ne sont pas interactifs.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Les utilisateurs peuvent naviguer entre les liens du fil d’Ariane en utilisant Tab et Shift-Tab.
- Un lien du fil d’Ariane peut être activé en appuyant sur Entrée lorsque le lien est sélectionné.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 15 janvier 2026