Communications numériques gouvernementales Beta

Système de design gouvernemental

Fil d'Ariane

Le fil d’Ariane permet de se situer dans la structure d’un site.

Il est placé au-dessus du titre principal de la page et sert de repère à l’utilisateur dans sa navigation.

Exemple
 


Quand l'utiliser

Le fil d’Ariane doit être utilisé dans toutes les pages de contenu d’un site.

À faire



À ne pas faire



Comment l'utiliser

Le fil d’Ariane est construit à partir des titres principaux des pages. Chaque titre est cliquable, à l’exception de celui de la page en cours.

Lorsque le titre est long, il faut prévoir un titre de navigation alternatif pour faciliter la lecture et la navigation.

Dans le format bureau, lorsque la page consultée se situe au 5e niveau ou plus, une ellipse est utilisée dans le fil d’Ariane pour alléger l’interface. Seuls les deux premiers niveaux et les deux derniers niveaux sont affichés. Les autres niveaux s’affichent lorsque l’on appuie sur les points de suspension.

Exemple
 


Dans le format mobile, seul le niveau parent de la page consultée est affiché.

Exemple
 


Informations techniques

Format bureau

Le fil d’Ariane est placé à 16 px du bandeau PIV.
L’espace prévu entre les niveaux, les chevrons et l’ellipse est de 8 px. Le dernier niveau présenté dans le fil d’Ariane représente la page active; il ne doit pas être un lien.

CSS des niveaux par défaut
Font-size : 0.8125rem
Color : #223654
Text-decoration : none

CSS des niveaux au survol
Font-size : 0.8125rem
Color : #223654
Text-decoration : underline

CSS de l’ellipse fermée
Background-color : #dae6f0
Color : #095797
Font-weight : bold


Une fois ouverte, l’ellipse affiche les niveaux supplémentaires.
Ses dimensions s’ajustent à son contenu, en conservant le dégagement prévu de 8 px.

CSS des niveaux par défaut
Font-size : 0.8125rem
Color : #223654
Text-decoration : none

CSS des niveaux au survol
Font-size : 0.8125rem
Color : #223654
Text-decoration : underline

CSS de l’ellipse ouverte
Background-color : #dae6f0
Color : #095797

Format mobile

Le fil d’Ariane est placé à 16 px du bandeau PIV dans le format mobile.
L’espace entre le chevron et le contenu est de 8 px.

CSS du lien
Font-size : 0.8125rem
Color : #095797
Text-decoration : none

Dernière mise à jour : 14 juillet 2020