Système de design GC Composants
Accueil Démarrer Aperçu des modèles de page Page de base Aperçu des composants Avis Barre de navigation latérale Barre de navigation supérieure Bascule de langue Bouton Boutons radio Carte Cases à cocher Champ de date Champ de saisie Chemin de navigation Conteneur Date de modification Détails En-tête Grille Icône Indicateur d'étape Jeu de champs Lien Masquage accessible Menu thématique Message d'erreur Pagination Pied de page Recherche Résumé des erreurs Signature Sélection Texte Titre Téléverseur de fichiers Zone de texte Aperçu des raccourcis CSS Réinitialisation des styles Mise en page réactive État Affichage Dimensionnement de la boîte Dimensionnement du conteneur Débordement Position Visibilité Alignement de texte Couleur de lien Couleur de texte Débordement de texte Décoration de texte de lien Famille de police Hauteur de ligne Police Saut de mot Style de liste Style de police Taille de lien Taille de police Transformation de texte Épaisseur de police Marge Marge intérieure Agencement de contenu Agencement des éléments Agencement individuel Alignement de contenu Alignement des éléments Alignement individuel Colonnes de grille Direction de l’élément flexible Dégagement Habillage de l’élément flexible Justification de contenu Justification des éléments Justification individuelle Lignes de grille Ordre Rétrécissement de l’élément flexible Élargissement de l’élément flexible Élément flexible Couleur de la bordure Couleur de l’arrière-plan Largeur de la bordure Rayon de la bordure Style de la bordure Image Noms des icônes Taille de l'icône Curseur Transition Événements de pointeur Aperçu des styles Unités de style Unités de style de couleur Unités de style d'espacement Unités de style typographie Contactez-nous Impliquez-vous Trouvez une démo

Barre de navigation supérieure
<gcds-top-nav>

Autres noms : menu du site, navigation, barre de navigation.

Une barre de navigation supérieure est une liste horizontale de liens de page.

  • GitHub
  • Figma

Aperçu du composant de barre de navigation supérieure

Structure de la barre de navigation supérieure — sur un ordinateur de bureau

  1. Le lien d'accueil identifie le site à l'aide d'un élément texte ou d'un logo et sert à naviguer vers la page d'accueil. Il utilise un lien de navigation qui est ajouté dans l'empacement home.
  2. Le lien de navigation est un lien vers une page ou une section populaire du site. Les liens de navigation peuvent se trouver au niveau supérieur s'ils sont autonomes.
  3. Le groupe de navigation eut être développé et réduit et contient généralement une liste de 2 à 5 liens.
  4. Le libellé du groupe de navigation identifie le groupe de navigation et agit à titre de bouton pour développer et réduire le groupe de navigation en question.
  5. L'icône de chevron du groupe de navigation pointe vers le bas lorsque le groupe de navigation est réduit et vers le haut lorsqu'il est développé.
  6. Le lien de navigation avec indicateur de page active met en évidence la page actuelle.
Un aperçu de la barre de navigation supérieure qui affiche la navigation du site représentée par des cases grises alignées horizontalement. Une case bleue suivie de deux cases grises représentent des liens où la dernière case est mise en surbrillance pour représenter le lien actif.

Design et accessibilité de la barre de navigation supérieure

Définir le lien d'accueil

  • Vous pouvez utiliser une forme raccourcie du nom complet.
  • Pour les logos, ajoutez du texte descriptif.

Remarque : Sur les appareils mobiles, le lien d'accueil n'est pas un hyperlien vers la page d'accueil.

Choisissez du texte pertinent pour les liens de navigation

  • Rendez le texte du lien clair et précis pour aider une personne à décider si elle doit quitter la page actuelle. Indiquez où et vers quel contenu mène un lien.
  • Veillez à ce que le texte du lien soit court et distinctif afin qu'une personne puisse y jeter un œil et trouver ce qu'elle recherche.
  • Limitez le nombre de liens dans votre barre de navigation supérieure. Une trop grande quantité d'informations augmente la charge cognitive et peut être accablante pour certaines personnes.
  • Si vous utilisez un chemin de navigation, uniformisez la hiérarchie dans les deux ensembles sur le site.

Conseil : Lisez le texte des liens de la barre de navigation supérieure tout haut dans leur séquence d'affichage afin de repérer les similarités dans la sonorité des textes qui seront lus par une technologie d'assistance.

Ajoutez des groupes de navigation à la barre de navigation supérieure

  • Choisissez d'inclure un deuxième niveau avec un groupe de navigation, parfois appelé escalier ou liste déroulante, à la barre de navigation supérieure.
  • Au deuxième niveau, limitez le groupe à 7 liens. Visez 2 à 5 liens par groupe.

Aidez-nous à nous améliorer

Vous avez des questions ou des demandes? Faites-nous part de vos commentaires à l'aide de notre formulaire de contact.

Quelque chose ne va pas? Signalez-le sur GitHub en créant un compte. Vous pourrez accéder aux réponses de l'équipe, suivre les progrès réalisés concernant votre problèmes et voir les problèmes signalés par d'autres personnes.

Fournir des commentaires Signaler un problème sur GitHub
2025-05-28