Liens de navigation
Les liens de navigation permettent d’accéder à des pages d’un niveau inférieur ou supérieur à la page active.
Il existe deux types de liens de navigation : le lien de retour et le lien « Voir plus ».
Quand les utiliser
Les liens de navigation sont utilisés en complément à la navigation principale. Ils ne doivent pas être confondus avec les liens hypertextes qui servent plutôt à atteindre une page complémentaire ou d’intérêt, qu’elle soit interne ou externe au site.
Lien de retour
Ce lien sert à retourner à la page précédente. On l’utilise dans une page de détails. Ce type de page est habituellement situé hors navigation, c’est-à-dire qu’elle n’est pas accessible à partir d’un menu ou d’une page de navigation.
Exemples de pages où appliquer le lien de retour :
- une fiche informative sur une espèce animale
- une page de détail d’événement
- une page de conditions d'admissibilité liées à un programme
Dans ces exemples, les pages de détails sont uniquement accessibles à partir de la page précédente, telle qu'une page de recherche, une page de calendrier d’événement ou une page de programme.
Exemple
Lien « Voir plus »
Ce lien sert à voir l’ensemble des contenus associés à un élément. Par exemple, dans un bloc présentant les trois dernières actualités publiées, un lien « Voir plus » permet d’accéder à une sous-page incluant l’ensemble des actualités.
Exemple
Comment les utiliser
Lien de retour
Ce lien s’affiche uniquement dans le format bureau. Il est placé entre le fil d’Ariane et le titre (ou le surtitre s’il y a lieu). On ne l’affiche pas sur la version mobile puisque la version mobile du fil d’Ariane est redondante avec le lien de retour.
Le libellé du lien de retour doit correspondre au titre de la page précédente. Par exemple : « Retour à la page [nom de la page] ». Le lien est accompagné d’une icône de flèche pointant vers la gauche pour accentuer le sens du message, c’est-à-dire de revenir en arrière.
Lien « Voir plus »
Ce lien sert exclusivement à afficher l’ensemble des contenus d’un élément.
Le libellé de ce type de lien peut être personnalisé afin de mieux décrire ce qui est attendu. Par exemple, « Voir plus de produits », « Voir plus de métiers et professions », « Voir plus de résultats », etc.
Ce lien est accompagné d’une icône de flèche pointant vers la droite pour accentuer le sens du message, c’est-à-dire la continuité.
Informations techniques
Lien de retour
Le lien de retour est seulement visible au format bureau.
L’icône est placée 4 px à gauche du libellé du lien. Sa taille est de 16 px.
Le libellé est souligné au survol.
Exemple
CSS du libellé
font-family: Open Sans;
font-size: 14px;
line-height: 20px;
font-color: #095797;
CSS du libellé au survol
text decoration: underline;
Le lien de retour est placé 8 px au-dessus du titre de niveau 1 de la page. S’il y a un surtitre, le lien sera placé 24 px au-dessus de celui-ci. L’icône est toujours alignée à gauche avec le titre.
Exemple standard
Exemple avec un surtitre
Le lien de retour ne doit pas dépasser 825 px en largeur. Si le libellé du lien est trop long, il peut être affiché sur plusieurs lignes.
Dans ce cas, l’icône demeure alignée verticalement avec la première ligne du libellé. Les autres lignes s’affichent en-dessous et sont alignées à gauche avec la première ligne.
Exemple avec un long libellé
Lien « Voir plus »
L’icône est placée 4 px à droite du libellé du lien. Sa taille est de 16 px.
Le libellé est souligné au survol.
CSS du libellé
font-family: Open Sans;
font-size: 14px;
line-height: 20px;
font-color: #095797;
CSS du libellé au survol
text decoration: underline;
Le lien est placé 16 px en dessous du contenu auquel il est lié. Il est aligné à gauche avec ce contenu.
Exemple
Dernière mise à jour : 10 novembre 2023