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é de chemin de navigation
• Exemples
• Générateur de code

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

Dans cette section

• Attributs essentiels
• Attributs facultatifs
• Emplacements (slots)

Sous-composant gcds-breadcrumbs-item href

L'attribut href définit l'URL de destination d'un gcds-breadcrumbs-item et 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

L'attribut hide-canada-link contrôle l'affichage du lien canada.ca par défaut dans le chemin de navigation. Par défaut, il 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

L'emplacement par défaut sert à ajouter des sous-composants gcds-breadcrumbs-item. L'emplacement par défaut de l'élément du chemin de navigation sert à ajouter le texte de cet élément.

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