Système de design GCDémarrerAperçu des modèles de pagePage de baseAperç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 texteAperçu des raccourcis CSSRéinitialisation des stylesMise en page réactiveÉtatDimensionnement 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 motMargeMarge intérieureAlignement 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 individuelCouleur de l'arrière-planCouleur de la bordureRayon de la bordureStyle de la bordureLargeur de la bordureNoms des icônesTaille de l'icôneImageCurseurÉvénements de pointeurTransitionAperçu des stylesUnités de styleCouleurEspacementTypographieNous contacterS'impliquerTrouvez une démo
Barre de navigation latérale <gcds-side-nav>
Autres noms : menu latéral, navigation à gauche, navigation verticale.La barre de navigation latérale est une liste de liens de navigation située du côté gauche de l'écran.
GitHub
Figma
Aperçu du composant barre de navigation latérale
Structure de la barre de navigation latérale
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 mène à une page donnée. Le lien est surligné en bleu pour indiquer l’état actuel de la page.
Le groupe de navigation affiche le nom du groupe et développe et réduit le sous-menu. Le sous-menu est une liste de liens de navigation connexes qui sont révélés lorsque le groupe de navigation se développe. L’icône du chevron pointe vers la droite lorsque le sous-menu est réduit et vers le bas lorsqu’il est développé.
Design et accessibilité de la barre de navigation latérale
Définir le lien d’accueil
Vous pouvez utiliser une forme raccourcie du nom complet.
Pour les logos, ajoutez du texte descriptif.
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 l’endroit où une personne sera redirigée ou ce qu’elle trouvera en cliquant sur un lien.
Gardez le texte des liens court et précis afin qu’une personne puisse parcourir les liens et trouver ce qu’elle cherche.
Si vous utilisez un composant Chemin de navigation, uniformisez la hiérarchie dans les deux ensembles de liens afin que chaque composant reflète le même cheminement sur le site.
Conseil : Lisez le texte des liens de navigation 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 latérale
Envisagez d’inclure à la barre de navigation latérale un deuxième ou troisième niveau à l’aide d’un groupe de navigation.
Employez une structure hiérarchique de 1 à 3 niveaux afin de catégoriser et classer les éléments de groupes de navigation de façon logique.
Imbriquez les éléments selon des catégories correspondant à l’architecture d’information du produit.
Classer les éléments de groupe de navigation
En règle générale, il est recommandé de classer les articles de premier niveau par importance ou priorité absolue pour les personnes qui utilisent votre service.
Regroupez logiquement les éléments similaires dans des ensembles de catégories. Ordonnez-les selon le type d’information comprise dans l’ensemble et l’utilisation que les personnes en feront.
Pour la recherche d’éléments connus, classez les liens par ordre alphabétique — ou numérique pour les éléments représentés par des chiffres.
Utilisez un ordre séquentiel pour des ensembles de tâches procédurales ou des renseignements situés dans le temps qui pourraient suivre un ordre chronologique naturel.
Testez les noms de catégories, les regroupements d’ensembles et l’ordre d’affichage dans la barre de navigation latérale afin d’utiliser les mots et les modèles mentaux les plus intuitifs pour les personnes qui les utilisent.
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-06