Liens de navigation
Les liens de navigation permettent d’accéder à des pages d’un niveau inférieur ou supérieur à la page active.
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
Il existe deux types de liens de navigation :
- Lien de retour
- Lien « Voir plus »
Quand l’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étail. Ces pages sont ordinairement hors navigation, c’est-à-dire qu’elles ne sont pas accessibles à 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 règlements liés à un programme.
Dans ces exemples, les pages sont uniquement accessibles à partir de la page précédente, que ce soit une page de recherche, un calendrier d’événement ou une page de programme.
Lien « Voir plus »
Ce lien sert exclusivement à afficher l’ensemble des contenus d’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.
Quand ne pas l’utiliser
Ne pas utiliser un lien de navigation :
- pour remplacer un lien hypertexte vers une page d’intérêt complémentaire ;
- lorsque la navigation principale ou le fil d’Ariane mobile remplit déjà cette fonction.
Anatomie
- Icône
- Libellé de la page précédente
- Libellé Voir plus
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.
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 »
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é.
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.
Lien de retour
Positionnement et alignement : 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.
Dimensions : 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.
Lien « Voir plus »
Positionnement et alignement : Le lien est placé 16 px en dessous du contenu auquel il est lié. Il est aligné à gauche avec ce contenu.
Comportements
Lien « Voir plus »
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.
Lien de retour
Le lien de retour est toujours visible au format bureau. Il n’est pas nécessaire de l‘afficher sur la version mobile s’il est redondant avec la version mobile du fil d’Ariane.
Lien « Voir plus »
Affiche l’ensemble des contenus liés à un élément.
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 :
- Cliquer sur le lien déclenche la navigation vers la page cible.
- Survol : soulignement du libellé.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Navigation par la touche Tab pour atteindre le lien.
- Activation par Entrée ou Espace.
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 : 11 février 2026