Aller au contenu
SkillCodex
Menu

Breadcrumbs

Fil d’Ariane

Une suite ordonnée de liens vers les pages parentes de la page courante qui situe celle-ci dans la hiérarchie du site.

Essayer le composant
Repères, sources et actions
Sources et révision
Mis à jour le
Version
v1.0.26 · r1
Sources
6 sources
Statut
Publié
Consulter les sources

Tu as peut-être cherché : montrer où je suis dans le siteun chemin de l’accueil à cette pagedes liens vers chaque section parente

Toutes les formulations
Enregistrer et partager

Reconnaître

S’orienter dans un parcours

Essayer

Faut-il situer la page dans une hiérarchie, parcourir des pages de résultats ou montrer l’étape d’un processus ?

Fil d’Ariane

Contexte commun aux essais

Une personne doit comprendre où elle se trouve et quel déplacement est possible, sans confondre hiérarchie du site, pages de résultats et étapes d’un processus.

Fil d’Ariane

Mission

Fil d’Ariane

Focalise l’ancêtre Réglages, active-le et vérifie que sa destination remplace l’emplacement actuel Facturation.

Destination : Facturation

Le fil décrit une hiérarchie, jamais l’historique du navigateur.

Résultat de l’essai

Facturation est la page actuelle ; les trois éléments précédents sont des liens vers ses ancêtres.

Étape 1 sur 3

Essayer

Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.

Comportement et cas limite
À observer
Facturation, l’emplacement actuel, est exposé séparément des liens ancêtres.
Cas limite
Les longs libellés traduits reviennent à la ligne ou se condensent sans transformer les séparateurs en contrôles ni perdre les noms accessibles.

Ce que cet essai montre

Le fil d’Ariane expose l’ascendance de la page courante ; la pagination parcourt des pages sœurs découpées par quantité, tandis que l’indicateur d’étapes suit des étapes métier.

Lequel convient à ton besoin ?

Fil d’Ariane

Les pages appartiennent à une hiérarchie de plusieurs niveaux

Pagination

Des résultats ou collections ont besoin de pages stables et partageables

Quel composant utilises-tu ici ?
Différence et sources

Le fil d’Ariane expose l’ascendance de la page courante ; la pagination parcourt des pages sœurs découpées par quantité, tandis que l’indicateur d’étapes suit des étapes métier.

Consulter les sources

    Parties du spécimen

    Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.

    Fil

    La séquence ordonnée qui communique la hiérarchie environnante.

    Position dans l’atlas

    Carte relationnelle

    Repère le chapitre, les concepts proches et la prochaine décision utile.

    • Chapitre

      S’orienter dans un parcours

      Fil d’Ariane appartient à ce groupe de concepts comparés.

    • Ne pas confondre

      Pagination

      Choisis Fil d’Ariane si la page courante a des parents vers lesquels l’utilisateur peut vouloir revenir. Choisis Pagination si une longue liste ou un ensemble de résultats est découpé en pages stables et partageables.

      Comparer cette paire
    • Ne pas confondre

      Indicateur d’étapes

      Choisis Fil d’Ariane si les pages ont des parents et que l’utilisateur peut remonter d’un niveau. Choisis Indicateur d’étapes si un processus linéaire a des étapes terminées, courante et à venir.

      Comparer cette paire
    • Prochaine étape

      Compare les concepts du chapitre avant de retenir une implémentation.

      Ouvrir le chapitre

    Avec tes mots

    Comprendre

    Ce que les gens décrivent

    Alias documentés : chemin de navigation, fil de navigation, chemin hiérarchique

    • montrer où je suis dans le site
    • un chemin de l’accueil à cette page
    • des liens vers chaque section parente
    • remonter vers une catégorie supérieure
    • montrer la hiérarchie au-dessus de cet élément
    • un fil avant le titre de la page

    Choisir

    À utiliser quand

    • Les pages appartiennent à une hiérarchie de plusieurs niveaux
    • Tu dois permettre de remonter directement vers un ancêtre

    À éviter quand

    • Le produit est plat ou ne contient que des pages sœurs
    • Le besoin concerne l’historique ou Retour

    Comparer

    Comparer les concepts proches

    Checklist de vérification

    Essaie ces gestes dans le lab, puis vérifie les mêmes comportements dans le résultat de ton agent. Adapte les noms d’exemple à ton interface.

    1. 1. À faire

      Lis le chemin depuis son premier parent jusqu’à la page actuelle.

      Résultat attendu

      La suite décrit la place de la page dans la hiérarchie, et la position actuelle est identifiable.

    2. 2. À faire

      Atteins un lien parent avec Tab et active-le avec Entrée.

      Résultat attendu

      Le lien ouvre le parent annoncé ; les séparateurs et le simple libellé de la page actuelle n’ajoutent pas d’arrêts au clavier.

    3. 3. À faire

      Réduis la fenêtre et lis le chemin disponible. Dans le résultat de ton agent, essaie aussi un chemin long s’il existe.

      Résultat attendu

      Le chemin passe à la ligne ou se replie de façon accessible, tout en conservant les noms complets et l’accès aux parents utiles.

    Contrat complet
    1. 1La région possède un nom accessible précis
    2. 2Les ancêtres sont de vrais liens
    3. 3La page actuelle est exposée une seule fois
    4. 4Les technologies d’assistance ignorent les séparateurs

    Comprendre → Reconnaître → Choisir → Comparer

    Pack pour ton agent

    Instructions pré-écrites à coller dans ton agent. Copier n’exécute rien.

    Implémenter correctement

    Construis Fil d’Ariane sans casser son comportement

    # Implémenter Fil d’Ariane dans ton agent
    
    ## Objectif
    Implémente Fil d’Ariane pour ce comportement vérifié : Une suite ordonnée de liens vers les pages parentes de la page courante qui situe celle-ci dans la hiérarchie du site.
    
    ## Prérequis
    - Inspecte d’abord le dépôt, le design system et les tests existants.
    - Préserve les changements sans rapport et borne les fichiers modifiés.
    - Confirme que Fil d’Ariane répond au besoin avant de coder.
    
    ## Comportement requis
    - Activer un lien ancêtre mène vers ce niveau nommé de la hiérarchie actuelle.
    - Le pointeur, le toucher ou Entrée suit le lien ; Espace conserve son comportement natif de défilement de page.
    
    ## États à couvrir
    - Fil prêt
    - Ancêtre focalisé
    - Destination chargée
    
    ## Accessibilité
    - Rôle ARIA : nav[aria-label] > ol > li > a[aria-current=page]
    - Le contrôle principal ou la région nommée pour Fil d’Ariane possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
    - Le focus visible reste sur chaque lien ancêtre jusqu’à la navigation ; la page actuelle en texte simple n’ajoute pas d’arrêt Tab.
    - Le fil d’Ariane est une navigation persistante et ne se ferme pas.
    - Nommer la région de navigation, exposer la page liée actuelle avec aria-current=page et masquer les séparateurs décoratifs.
    - Tab et Maj+Tab parcourent les liens ancêtres
    - Entrée active le lien focalisé
    - Les séparateurs décoratifs ne reçoivent jamais le focus
    
    ## Quand ne pas utiliser
    - Le produit est plat ou ne contient que des pages sœurs
    - Le besoin concerne l’historique ou Retour
    
    ## Critères d’acceptation
    - La région possède un nom accessible précis
    - Les ancêtres sont de vrais liens
    - La page actuelle est exposée une seule fois
    - Les technologies d’assistance ignorent les séparateurs
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le besoin est relié au comportement canonique avant toute décision technique.
    • Les états, l’accessibilité et les non-objectifs empêchent une implémentation seulement visuelle.
    • Les critères d’acceptation et le format de sortie rendent la vérification observable.

    À essayer ensuite

    Vérifie Fil d’Ariane sur un parcours réel

    # Vérifier Fil d’Ariane après l’implémentation
    
    ## Objectif
    Audite l’implémentation de Fil d’Ariane au regard de son comportement, de ses états et de ses exigences d’accessibilité sans la modifier automatiquement.
    
    ## Contrôles
    - Rejoue le plus petit parcours représentatif.
    - Contrôle le clavier, le focus, le nom accessible et les annonces.
    - Relie chaque écart à un critère d’acceptation précis.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:0ec808e73b4ef9eb54d338ac7712b7f166c167990fd89def3f857f52669101b4

    Diagnostiquer un problème

    Trouve et corrige le défaut de Fil d’Ariane

    # Déboguer Fil d’Ariane dans ton agent
    
    ## Symptôme observé
    [DÉCRIS ICI LE SYMPTÔME]
    
    ## Contrôles observables
    - Reproduis le problème avec le plus petit parcours pertinent.
    - Compare le comportement aux états et transitions documentés de Fil d’Ariane.
    - Vérifie le clavier, le focus, le nom accessible et les annonces.
    
    ## Causes possibles
    - La primitive employée ne correspond pas au comportement attendu.
    - Un état, une transition ou un retour de focus manque.
    - Le composant voisin capture un événement ou masque un signal accessible.
    
    ## Corrections bornées
    - Corrige la cause reproduite sans recréer les composants voisins.
    - Conserve le contrat public et ajoute un test ciblé de non-régression.
    - N’installe aucune dépendance et ne modifie aucun état distant sans autorisation.
    
    ## Vérification finale
    - La région possède un nom accessible précis
    - Les ancêtres sont de vrais liens
    - La page actuelle est exposée une seule fois
    - Les technologies d’assistance ignorent les séparateurs
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le symptôme explicite évite de partir d’une correction supposée.
    • Les contrôles séparent comportement, accessibilité et interférences voisines.
    • La correction reste bornée et doit produire une preuve de non-régression.

    À essayer ensuite

    Verrouille la correction de Fil d’Ariane

    # Empêcher la régression de Fil d’Ariane
    
    ## Objectif
    Transforme la cause reproduite en test de non-régression ciblé et compare Fil d’Ariane aux concepts voisins avant d’élargir la correction.
    
    ## Contrôles
    - Prouve que le test échoue avant la correction.
    - Prouve qu’il passe après la correction bornée.
    - Vérifie qu’aucun composant voisin n’a changé de comportement.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:973c8c13d5cbbeffafa2793823603e8b84d542224c498bd29bd3d1972f67e5f0

    Fiche complète, enregistrement et provenance

    Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.

    Digest du Pack: sha256:67d0c19c2d520a7c3880ad6ce0ff6cf18cc2e096c971ae5f8a335f4c3b4b2eff

    Dans le code

    TechnologiePrimitiveVersionLimite
    Web platform

    nav with ol and a[href]

    NatifComposer une région de navigation nommée, une liste ordonnée, des liens natifs vers les ancêtres et un élément actuel ; les séparateurs restent décoratifs.

    Détails techniques

    Comportements

    • Naviguer vers un ancêtre

      Activer un lien ancêtre mène vers ce niveau nommé de la hiérarchie actuelle.

    • Suivre avec l’activation native du lien

      Le pointeur, le toucher ou Entrée suit le lien ; Espace conserve son comportement natif de défilement de page.

    États

    • Fil prêt

      Fil prêt

    • Ancêtre focalisé

      Ancêtre focalisé

    • Destination chargée

      Destination chargée

    Transitions d’état

    • Fil prêt → Ancêtre focalisé

      Tab atteint un lien ancêtre sans changer de page.

    • Ancêtre focalisé → Destination chargée

      Activer le lien ancêtre focalisé charge cette destination hiérarchique.

    • Destination chargée → Fil prêt

      Réinitialiser restaure le fil de la page courante.

    Scénarios de test

    Contexte
    Les réglages du projet sont imbriqués sous Espace de travail, Acme, Réglages et Facturation.
    Mission
    Focalise l’ancêtre Réglages, active-le et vérifie que sa destination remplace l’emplacement actuel Facturation.
    État principal
    Facturation, l’emplacement actuel, est exposé séparément des liens ancêtres.
    Cas limite
    Les longs libellés traduits reviennent à la ligne ou se condensent sans transformer les séparateurs en contrôles ni perdre les noms accessibles.

    Signaux visuels

    • Fil d’ancêtres ordonné
    • Séparateurs décoratifs entre les éléments
    • Emplacement actuel en dernière position

    Signaux comportementaux

    • Les liens ancêtres utilisent la navigation native
    • Un seul élément expose la page actuelle
    • La séquence reflète la hiérarchie, pas l’historique de visite

    Accessibilité

    Rôle
    nav[aria-label] > ol > li > a[aria-current=page]
    Nom accessible
    Le contrôle principal ou la région nommée pour Fil d’Ariane possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
    Focus clavier
    Le focus visible reste sur chaque lien ancêtre jusqu’à la navigation ; la page actuelle en texte simple n’ajoute pas d’arrêt Tab.
    Fermeture
    Le fil d’Ariane est une navigation persistante et ne se ferme pas.
    Défilement
    La position actuelle reste visible si possible. Un changement de navigation ou d’étape mène vers un titre pertinent sans saut de défilement inattendu.
    Annonce
    Nommer la région de navigation, exposer la page liée actuelle avec aria-current=page et masquer les séparateurs décoratifs.
    Clavier
    • Tab et Maj+Tab parcourent les liens ancêtres
    • Entrée active le lien focalisé
    • Les séparateurs décoratifs ne reçoivent jamais le focus

    Implémentations

    Ouvrir la matrice HTML, ARIA, Radix et shadcn
    • nav with ol and a[href]

      implementationKind
      custom
      nativeElement
      nav with ol and a[href]
      ariaPattern
      breadcrumb navigation landmark with aria-current=page
      radixPrimitive
      Non applicable
      shadcnRecipe
      Non applicable
      runtimeDependency
      Non applicable
      packageName
      Non applicable
      exportName
      Non applicable
      exactVersion
      Non applicable
      status
      exception
      sourceId
      source-ui-aria-breadcrumb
      deprecationStatus
      active
      replacement
      Non applicable
      validFrom
      Non applicable
      validUntil
      Non applicable

      Limite d’équivalence : Composer une région de navigation nommée, une liste ordonnée, des liens natifs vers les ancêtres et un élément actuel ; les séparateurs restent décoratifs.

      Vérifier la source du binding

    Sources

    • WAI-ARIA APG: Breadcrumb Pattern
      sourceId
      source-ui-aria-breadcrumb
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-08-07T07:06:02Z
      consultedAt
      2026-08-10
      license
      Non indiquée
      contentDigest
      sha256:7ecac0b55af3614b985f4075562899692a15394bd53f8d1cb2aa4d7611b92e18
      status
      verified

      Affirmation couverte : Fil d’Ariane : guide APG informatif pour le modèle fil d’Ariane : rôles, états, relations et interactions au clavier.

    • WHATWG HTML: The nav element
      sourceId
      source-ui-html-nav
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/sections.html#the-nav-element
      publisher
      WHATWG
      sourceRevision
      http-etag:"6a5dd5e8-2c58d"
      consultedAt
      2026-08-10
      license
      Non indiquée
      contentDigest
      sha256:cfd126e3b971918ee24c5244457dba55bbde269c92fb879da1ab97dd6fbb89c6
      status
      verified

      Affirmation couverte : Fil d’Ariane : sémantique native normative, états, attributs et comportement du navigateur pour nav.

    • WHATWG HTML: The ol element
      sourceId
      source-ui-html-ordered-list
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element
      publisher
      WHATWG
      sourceRevision
      http-etag:"6a5dd5e8-34d05"
      consultedAt
      2026-08-10
      license
      Non indiquée
      contentDigest
      sha256:4e0627672499c1cfdcd9525e54080baafee74ab80e97b8b446737bfe97d146a5
      status
      verified

      Affirmation couverte : Fil d’Ariane : sémantique native normative, états, attributs et comportement du navigateur pour ol and li.

    • WHATWG HTML: The a element
      sourceId
      source-ui-html-link
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:fe0a3d4315ccdf4f171cbb0c61ee6188b0db2dfe13a7c7f1f04f6b37528661f6
      status
      verified

      Affirmation couverte : Fil d’Ariane : sémantique native normative, états, attributs et comportement du navigateur pour a[href].

    • WAI-ARIA 1.2: Roles Model
      sourceId
      source-ui-wai-aria-roles
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#roles
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Affirmation couverte : Fil d’Ariane : définitions normatives des rôles ARIA et contraintes du rôle accessible indiqué.

    • WCAG 2.2: Focus Appearance
      sourceId
      source-ui-wcag-understanding-focus-appearance
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:fdcf316a1f0e3cc758eda9618322d132862124ff0a3f3b1a3acbf20daf804ff0
      status
      verified

      Affirmation couverte : Fil d’Ariane : guide WCAG informatif pour évaluer l'apparence visible du focus clavier.