Menu d'ancres
Le menu d’ancres est un élément de navigation interne qui permet aux utilisateurs de naviguer rapidement vers différentes sections d’une page Web. Il est particulièrement utile pour les longues pages où le repérage de l'information peut être laborieux.
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 ».
Quand l’utiliser
Le menu d’ancres s’utilise pour faciliter le repérage et la consultation des utilisateurs lorsqu’une page Web est longue et contient plusieurs sections distinctes.
Quand ne pas l’utiliser
Éviter d’utiliser le menu d’ancres sur les pages Web avec peu de contenu ou de sections, car cela pourrait rendre la navigation excessive.
Anatomie
- Conteneur
- Titre de la section
- Liste des liens d’ancrage
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.
Titre de la section
Le libellé « Dans cette page : » est obligatoire et sert de titre pour la liste de liens.
Liste des liens d’ancrage
Le menu d’ancres contient une liste de liens qui correspondent aux différentes sections de la page.
Chaque lien pointe vers un titre de niveau 2 (H2) dans la page. Les autres niveaux de titre sont omis du menu d’ancres.
Le libellé de chaque lien doit être identique au titre qui lui est associé.
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.
Menu d’ancres (complet)
Positionnement et alignement : Le menu d’ancres devrait être placé en haut de la page pour que les utilisateurs puissent accéder facilement aux différentes sections sans avoir à faire défiler toute la page.
Dimensions : Le menu d’ancres occupe 100 % de la largeur de la zone de contenu, dont la limite est 825 px de large.
Espacements : Une marge minimale de 24 px en haut et en bas crée un espace supplémentaire autour du menu d’ancres, le distinguant visuellement des autres éléments de la page.
Comportements
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.
Liste des liens d’ancrage
Les liens sont cliquables.
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 un lien pour ouvrir la ressource.
- Survol : affichage d’un soulignement ou changement de couleur pour indiquer l’interactivité.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Navigation possible via la touche Tab pour passer d’un lien à l’autre.
- Activation d’un lien avec la touche 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 : 15 janvier 2026