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

Structure de la barre de navigation latérale

1. Le libellé identifie le site du produit à l’aide d’un élément texte ou d’un logo. Il indique également le point de repère de navigation qui sera utilisé par les technologies d'assistance.
2. Le lien de navigation est un lien qui mène vers une page ou une section du site de produit.
3. Le groupe de navigation est une collection de liens de navigation liés au nom du groupe de navigation. Il peut être développé et réduit.
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 la liste est réduite et vers le haut lorsqu’elle est développée.
6. Le lien de navigation avec indicateur de page active met en évidence la page actuelle.

Design et accessibilité de la barre de navigation latérale

Définir le libellé

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

Remarque : Sur les appareils mobiles, le libellé 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 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.

Classez les éléments de groupe de navigation par ordre alphabétique

Facilitez la recherche au sein des groupes de navigation comportant 7 liens de navigation ou plus en classant les liens par ordre alphabétique — ou numérique si les éléments sont identifiés à l’aide de chiffres.