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

Sur cette page

• Codage et accessibilité du chemin de navigation
• Exemples
• Générateur de code

Codage et accessibilité du 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 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.

Dans cette section

• Attributs essentiels
• Attributs facultatifs
• Emplacements (slots)

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>

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>

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.

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.