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 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.

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é.
L’image illustrant la barre de navigation latérale montre 7 éléments. 1. Le libellé repère de navigation est en haut, aligné à gauche, en caractères gras, avec une taille de police plus grande que le texte qui suit. 2. Le premier exemple de lien de navigation se trouve immédiatement en dessous en caractères bleus soulignés. Le deuxième exemple est surligné d’un rectangle bleu clair et comporte des caractères en gras. 3. Le groupe de navigation est un chevron pointant vers le bas suivi de texte en caractères gras. 4. Le sous-menu pointe vers 3 liens de navigation superposés verticalement sous le groupe de navigation

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