Éléments de navigation dans le menu de navigation principale
Les éléments de navigation comprennent des hyperliens qui permettent un accès direct aux pages du site ou l'ouverture de sous-menus pour accéder aux pages du site. Ils sont utilisés lorsque le site contient plusieurs pages principales ou sections. Ils servent de guide et d’indices qui permettent à un utilisateur de prédire ce qu'il trouvera s'il suit un certain chemin afin qu'ils puissent naviguer efficacement sur le site.
Les éléments de navigation se classifient en trois types :
- Lien de page : dirige directement vers une page spécifique.
- Ouvrant un sous-menu : ouvre un sous-menu avec des options liées.
- « Plus » : ouvre un sous-menu « Plus » pour les liens excédentaires. Voir la documentation sur le principe de « Priorité Plus ».
Rédaction des libellés et présence d’icônes
Les libellés textuels choisis doivent être clairs et concis (environ 10 caractères) pour éviter toute confusion et minimiser le temps de réflexion. Ajouter une icône n’aidera pas à clarifier un libellé confus.
Les éléments de navigation ne comportent pas d’icônes.
Seul l’élément « Accueil » peut être remplacé par une icône de maison. Si l'ajout d'une icône de retour à l'accueil est souhaité, elle doit être positionnée comme premier élément dans la zone des éléments de navigation.
En d’autres temps, les icônes augmentent la largeur du menu et ajoutent de la complexité, nuisant à la navigation, particulièrement sur mobile.
Comment l’utiliser
Le nombre d'éléments de navigation doit être compris entre 3 et 6, avec un libellé d'une longueur maximale d’environ 10 caractères par élément.
Les éléments ouvrant un sous-menu doivent être accompagnés d’une icône de chevron pointant vers le bas lorsqu’ils sont fermés et vers le haut lorsque le sous-menu est ouvert.
L'élément « Plus » remplace les éléments de navigation qui dépassent l'espace alloué dans le menu, autant en format bureau que mobile. Il vient regrouper les éléments en surplus en leur donnant accès via un sous-menu « Plus ».
Informations techniques
Structure et construction
Un élément de navigation est une zone cliquable contenant du texte et parfois une icône de chevron pour indiquer un sous-menu.
L'élément « Plus » se démarque des autres éléments de navigation en ayant un aspect de bouton bleu pâle qui encadre le libellé « Plus » à l'intérieur de la zone cliquable.
Positionnement
Les éléments de navigation sont disposés côte à côte.
En format bureau, les éléments de navigation sont positionnés à gauche dans le menu.
En format mobile, les éléments de navigation sont positionnés à gauche dans le menu et sont placés en dessous des icônes utilitaires et du bouton de session.
Soulignement (survolé et actif)
Le soulignement, qui apparaît lorsqu'un élément de navigation est survolé ou actif, est positionné au bas de l’élément de navigation, collé au rebord inférieur du menu.
Chevron pour sous-menu
Pour un élément ouvrant un sous-menu ou pour l’élément « Plus », le chevron est positionné à droite du libellé textuel. Son alignement vertical est centré sur la hauteur de l’interligne.
Élément « Plus »
Lorsque l'espace n'est pas suffisant pour afficher tous les éléments de navigation, l'élément « Plus » est positionné à droite des éléments de navigation.
Dimensions
Chaque élément de navigation possède la même hauteur totale que le menu (72 px en format bureau et 40 px en format mobile).
Sa largeur est influencée par le libellé textuel (et l’icône de chevron, le cas échéant) le composant, auquel on additionne les dégagements intérieurs (voir la section Espacements ci-bas).
Soulignement (survolé et actif)
Le soulignement, qui apparaît lorsqu'un élément de navigation est survolé ou activé, a une hauteur de 4 px. En format bureau, sa largeur est plus grande que le libellé textuel de 8 px à droite et à gauche. En format mobile, sa largeur est plus grande que le libellé textuel de 4 px à droite et à gauche.
Chevron pour sous-menu
Pour un élément ouvrant un sous-menu ou pour l’élément « Plus », le chevron a une taille de 8 px de large par 4,25 px de haut (autant en format bureau qu’en format mobile).
Élément « Plus »
Au format bureau, la hauteur du pseudo-bouton bleu pâle à l'intérieur de la zone cliquable a une hauteur de 40 px. Au format mobile, la hauteur de cet élément est de 24 px.
Espacements
Chaque élément de navigation est positionné directement à côté du suivant, sans aucun espace (0 px) entre eux. Le dégagement intérieur de chacun suffit à assurer une bonne séparation visuelle de chaque côté du libellé textuel.
En format bureau, le dégagement intérieur est de 16 px à gauche et à droite dans la zone cliquable.
En format mobile, ce dégagement intérieur est de 8 px.
Chevron pour sous-menu
Pour un élément ouvrant un sous-menu ou pour l’élément « Plus », l'espacement entre le libellé textuel et le chevron diffère selon le format. En format bureau, le chevron est placé 8 px à droite du libellé textuel. En format mobile, cet espacement est réduit à 4 px.
Élément « Plus »
En format bureau, le dégagement intérieur est de 8 px. Aussi, le pseudo-bouton bleu pâle a un dégagement de 8 px sur ses côtés gauche et droit pour créer une apparence de bouton bleu pâle.
En mobile, ces 2 dégagements intérieurs passent à 4 px.
États
Par défaut
La couleur du libellé textuel est #FFFFFF. La graisse du texte est semibold.
En format bureau, la taille de caractères est de 18 px et l'interligne est de 28 px.
En format mobile, la taille de caractères est de 13 px, et l'interligne est de 16 px.
Pour un élément ouvrant un sous-menu, la couleur du chevron est la même que son libellé textuel.
L’élément « Plus » possède la couleur #DAE6F0 comme arrière-plan. La couleur du libellé textuel et du chevron est #095797.
CSS des éléments de navigation - format bureau
font-weight: semibold;
color: #ffffff;
background-color: #19406c;
padding: 0 22px;
height: 72px;
font-size: 18px;
line-height: 28px;
CSS des éléments de navigation - format mobile
font-weight: semibold;
color: #ffffff;
background-color: #19406c;
padding: 0 12px;
height: 40px;
font-size: 13px;
line-height: 16px;
CSS des éléments « Plus » (zone cliquable) - format bureau
background-color: #19406c;
padding: 0 16px;
CSS des éléments « Plus » (zone cliquable) - format mobile
background-color: #19406c;
padding: 0 8px;
CSS des éléments « Plus » (pseudo-bouton bleu pâle) - format bureau
font-weight: semibold;
color: #095797;
background-color: #dae6f0;
padding: 0 6px;
CSS des éléments « Plus » (pseudo-bouton bleu pâle) - format mobile
font-weight: semibold;
color: #095797;
background-color: #dae6f0;
padding: 0 4px;
Au survol
Au survol, le soulignement de couleur #DAE6F0 apparaît au bas de l’élément de navigation.
CSS des éléments de navigation - au survol
content: "";
position: absolute;
background-color: #dae6f0;
width: calc(100% - 16px);
height: 4px;
bottom: 0;
left: 8px;
Au focus
Au focus, l’élément de navigation a un contour extérieur de 2 px de couleur #4A98D9.
CSS des éléments de navigation - au focus
outline: 2px solid #4A98d9;
Ouvert et Actif
Lorsque activé, la graisse du texte passe en bold. De plus, le soulignement de couleur #DAE6F0 est présent au bas de l’élément de navigation.
CSS des éléments de navigation - ouverts et actifs
font-weight: bold;
content: "";
position: absolute;
background-color: #dae6f0;
width: calc(100% - 16px);
height: 4px;
bottom: 0;
left: 8px;
Dernière mise à jour : 6 novembre 2023