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.

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

A - Liens : Titres principaux des pages cliquables.
B - Chevrons : Séparateurs entre les niveaux.
C - Titre de la page en cours : Le dernier élément non cliquable qui montre où l’utilisateur se trouve.
D - Ellipse : utilisée pour cacher les niveaux intermédiaires en format bureau.
E - Sous-menu : Une fois cliquée, l’ellipse affiche les niveaux supplémentaires dans un sous-menu.

Fil d’Ariane

Largeur maximale : 825 px.

Devrait se limiter à une seule ligne.

Liens

Taille de police : 12 px.

Hauteur de ligne : 18 px.

Chevrons

Taille : 4 px de large par 8 px de haut.

Taille : 24 px de large par 16 px de haut.

La largeur du sous-menu peut être adaptée à son contenu, cependant, elle doit respecter une limite maximale de 296 px.

Liens, chevrons et ellipse

Dégagement entre les liens, les chevrons et l'ellipse : 8 px.

Dégagement intérieur de 8 px de chaque côté du sous-menu.

Espacement entre chaque lien dans le sous-menu de l'ellipse : 12 px.

Fil d’Ariane

Placé à 16 px sous le bandeau d'en-tête du PIV.

Alignement vertical sur la ligne du fil d'Ariane.

Positionné directement sous l'ellipse, aligné à gauche par défaut.

Éléments principaux

Liens

• Construits à partir des titres principaux des pages.
• Prévoir un titre de navigation alternatif pour les longs titres.

Éléments cachés

Lorsque le nombre de liens dépasse 5 niveaux, une ellipse et un sous-menu doivent être utilisés. La section « Troncature du fil d'Ariane et ouverture du sous-menu » renferme tous les détails concernant cette utilisation.

Interactions

Les libellés de pages du fil d'Ariane sont interactifs, à l'exception de la page en cours.

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

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é.

Réactivité (mobile)

Seul le niveau parent de la page consultée est affiché en format mobile.

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.

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.