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
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.
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 de la page, avant l’élément <main>. De cette façon, un lien « Passer au contenu principal » permettra aux personnes d’ignorer les liens de navigation, y compris le chemin de navigation.
Utiliser les éléments du chemin de navigation pour les liens du chemin de navigation
Ajoutez un nouveau lien au chemin de navigation à l’aide du composant <gcds-breadcrumbs-item>. Ajoutez-le au moyen de la propriété href.
Exemples
Explorez les différentes façons de configurer le composant. Chaque exemple présente une mise en œuvre fonctionnelle et du code prêt à copier.
Ces attributs sont requis pour que le composant fonctionne correctement.
href (sous-composant gcds-breadcrumbs-item)
Utilisez href pour définir l’URL de destination d’un gcds-breadcrumbs-item. Cet attribut est obligatoire pour que l’élément du chemin de navigation fonctionne comme un lien.
<gcds-breadcrumbs> <gcds-breadcrumbs-item href="#"> Page d’accueil </gcds-breadcrumbs-item> <gcds-breadcrumbs-item href="#"> Lien vers la page parent </gcds-breadcrumbs-item></gcds-breadcrumbs>
Attributs facultatifs
Ces attributs vous permettent de personnaliser ou d’enrichir le comportement et la présentation du composant.
hide-canada-link
Utilisez hide-canada-link pour afficher ou masquer le lien canada.ca par défaut dans le chemin de navigation. Par défaut, cet attribut est défini à false, ce qui signifie que le lien canada.ca apparaît comme premier élément du chemin de navigation.
<gcds-breadcrumbs> <gcds-breadcrumbs-item href="#"> Page d’accueil </gcds-breadcrumbs-item> <gcds-breadcrumbs-item href="#"> Lien vers la page parent </gcds-breadcrumbs-item></gcds-breadcrumbs>
Lorsqu’il est défini à true, le lien canada.ca par défaut est masqué, et seuls les éléments du chemin de navigation fournis sont affichés.
<gcds-breadcrumbs hide-canada-link><gcds-breadcrumbs-item href="#">Page d'accueil</gcds-breadcrumbs-item><gcds-breadcrumbs-item href="#">Lien vers la page parent</gcds-breadcrumbs-item></gcds-breadcrumbs>
Emplacements (slots)
L’emplacement par défaut vous permet d’injecter du contenu personnalisé dans la zone de contenu principale du composant, et les emplacements nommés, dans des zones spécifiques.
default
Utilisez l’emplacement par défaut pour ajouter des sous-composants gcds-breadcrumbs-item. Utilisez l’emplacement par défaut du sous-composant gcds-breadcrumbs-item pour ajouter le texte de cet élément du chemin de navigation.
<gcds-breadcrumbs hide-canada-link><gcds-breadcrumbs-item href="#">Page d'accueil</gcds-breadcrumbs-item><gcds-breadcrumbs-item href="#">Lien vers la page parent</gcds-breadcrumbs-item></gcds-breadcrumbs>
Générateur de 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.
Choisissez des valeurs de code pour obtenir l'élément que vous voulez.
Obtenez le code et intégrez-le dans votre environnement.
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. Page d’accueilLien vers la page parent 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 2026-07-13