Système de design GCComposants
Système de design GC Démarrer Aperçu des modèles de pagePage de base Aperçu des composantsAlerteAvisBarre de navigation latéraleBarre de navigation supérieureBascule de langueBoutonBoutons radioCarteCases à cocherChamp de dateChamp de saisieChemin de navigationConteneurDate de modificationDétailsEn-têteGrilleIcôneIndicateur d'étapeJeu de champsLienMasquage accessibleMenu thématiqueMessage d'erreurPaginationPied de pageRechercheRésumé des erreursSélectionSignatureTableauTéléverseur de fichiersTexteTitreZone de texte Aperçu des raccourcis CSS Réinitialisation des styles Mise en page réactiveÉtat Dimensionnement de la boîteDimensionnement du conteneurAffichageDébordementPositionVisibilité PoliceFamille de policeTaille de policeStyle de policeÉpaisseur de policeHauteur de ligneCouleur de lienTaille de lienDécoration de texte de lienStyle de listeAlignement de texteCouleur de texteDébordement de texteTransformation de texteSaut de mot MargeMarge intérieure Alignement de contenuAlignement des élémentsAlignement individuelÉlément flexibleDirection de l’élément flexibleÉlargissement de l’élément flexibleRétrécissement de l’élément flexibleHabillage de l’élément flexibleDégagementColonnes de grilleLignes de grilleJustification de contenuJustification des élémentsJustification individuelleOrdreAgencement de contenuAgencement des élémentsAgencement individuel Couleur de l'arrière-planCouleur de la bordureRayon de la bordureStyle de la bordureLargeur de la bordure Noms des icônesTaille de l'icôneImage CurseurÉvénements de pointeurTransition Aperçu des stylesUnités de styleCouleurEspacementTypographie Nous contacterS'impliquerTrouvez 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

  • 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.
  • 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.
  • Le groupe de navigation eut être développé et réduit et contient généralement une liste de 2 à 5 liens.
  • 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.
  • 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é.
  • 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