Composant · Navigation

Breadcrumb

Stable

Fil d'Ariane indiquant la position de la page courante dans la hiérarchie et permettant de remonter. Rendu sémantique : <nav> + liste ordonnée, dernier élément marqué comme page courante.

Quand l'utiliser

Pour des hiérarchies profondes (≥ 2 niveaux) où l'utilisateur doit pouvoir remonter.
En complément de la navigation principale, pas à sa place.
Inutile sur une page de premier niveau.

Exemples

Hiérarchie profonde

Deux niveaux

Voir le code (Svelte)

<div class="docs-demo-stack">
  <h3>Hiérarchie profonde</h3>
  <Breadcrumb
    items={[{"label":"Accueil","href":"#"},{"label":"Projets","href":"#"},{"label":"Forge","href":"#"},{"label":"Paramètres","current":true}]}
    label="Fil d'Ariane"
  />
  <h3>Deux niveaux</h3>
  <Breadcrumb
    items={[{"label":"Catalogue","href":"#"},{"label":"Breadcrumb","current":true}]}
    label="Fil d'Ariane court"
  />
</div>

Anatomie

Conteneur : <nav aria-label> contenant une liste ordonnée <ol>.
Maillons : chaque item est un <a> (si href et non courant) ou un <span>.
Séparateur : un « / » décoratif (aria-hidden) entre les maillons.
Page courante : <span aria-current="page">, non cliquable.

Accessibilité

Le <nav> reçoit un aria-label via la prop label.
Le maillon courant porte aria-current="page" et n'est pas un lien.
Les séparateurs sont aria-hidden : ils ne sont pas annoncés.

Lignes directrices

À faire

Refléter la vraie hiérarchie de navigation.
Marquer le dernier élément comme current.

À éviter

Rendre la page courante cliquable.
Y mettre l'historique de navigation plutôt que la hiérarchie.

API

Prop	Type	Défaut	Description
`items`	`BreadcrumbItem[]`	requis	Maillons du fil, dans l'ordre.
`label`	`string`	`"Breadcrumb"`	aria-label du <nav>.
`class`	`string`	optionnel	Classe(s) supplémentaire(s).
Autres attributs	`HTMLAttributes<HTMLElement>`	N/A	Propagés sur le <nav>.

Type BreadcrumbItem

Champ	Type	Description
`label`	`string`	Texte du maillon.
`href`	`string?`	Lien ; rend un <a> si présent et non courant.
`current`	`boolean?`	Marque la page courante (aria-current).

Tokens utilisés

--st-component-breadcrumb-text
--st-component-breadcrumb-linkText
--st-component-breadcrumb-currentText
--st-component-breadcrumb-separator