Chemin de navigation
<gcds-breadcrumbs>

Autres noms : fil d’Ariane

Un chemin d'accès à la page actuelle à partir de chaque niveau précédent de la hiérarchie du site.

• Requis sur Canada.ca

• GitHub
• Figma

Créer un composant chemin de navigation

Utilisez le chemin de navigation pour indiquer l'emplacement de la page actuelle par rapport à ses pages parents dans la structure du site.

Codage et accessibilité pour le composant chemin de navigation

Commencez par le lien Canada.ca et le lien de la page d'accueil

• Maintenez le lien Canada.ca comme premier lien de chemin de navigation par défaut pour la plupart des pages et sites Web.
• Choisissez de remplacer le lien Canada.ca par le lien de la page d'accueil sur les pages transactionnelles et les sites Web ou produits autonomes. Pour supprimer le lien Canada.ca à la tête du chemin de navigation, définissez l'attribut hide-canada-link à true.

Conseil : Lorsqu'un processus n'a pas de page d'accueil traditionnelle, insérez le lien vers la page de départ du processus.

Placez le chemin de navigation avant l'élément <main>

Placez le chemin de navigation en haut d'une page, avant l'élément <main>. De cette façon, un lien « Passer au contenu principal » permettra à l'utilisateur·rice d'ignorer tous les liens de navigation, y compris les chemins de navigation.

Utiliser les éléments du chemin de navigation pour les liens du chemin de navigation

Ajoutez un nouveau lien au composant Chemin de navigation à l'aide du composant <gcds-breadcrumbs-item>. Le lien peut être ajouté par le biais de la propriété href.

Obtenez votre code

Générez une version du composant dont vous avez besoin en sélectionnant les propriétés de code correspondantes ou explorez les possibilités en choisissant différentes valeurs de code.

1. Choisissez des valeurs de code pour obtenir l'élément que vous voulez.

2. Obtenez le code et intégrez-le dans votre environnement.

3. Ajoutez tout contenu nécessaire au composant (comme le texte du libellé).

Remarque : Conformément à la pratique courante, le générateur de code utilise l'anglais pour tous les éléments de code.