Fil d'Ariane

مسار التصفحBreadcrumb

Stablesrc/dsm/components/breadcrumb.tsx

Le fil d'Ariane situe la page courante dans l'arborescence du site. Le dernier élément représente la page active et n'est pas cliquable. Sous `sm`, il se réduit à un simple lien de retour vers la page parente.

Import

import { Breadcrumb } from "@/dsm/components/breadcrumb";

Exemples

Fil d'Ariane par défaut

Trois niveaux au-dessus de la page courante.

LTR

Arborescence profonde

Un parcours à cinq niveaux — réduisez la fenêtre sous 640 px pour voir le lien de retour mobile.

LTR

Usage

Quand l'utiliser

Affichez le fil d'Ariane sur toute page à plus d'un niveau de profondeur (démarche, fiche institution, article).
Gardez les libellés courts et fidèles au titre réel de chaque page intermédiaire.

Quand ne pas l'utiliser

N'utilisez pas le fil d'Ariane sur la page d'accueil ou une page de premier niveau : il n'apporte rien avec un seul élément.
Ne dupliquez pas le titre `h1` de la page dans le fil d'Ariane : le dernier élément suffit à donner le repère.

Accessibilité & langues

Accessibilité

Le conteneur est un `nav` avec `aria-label` traduit (« Vous êtes ici ») pour être identifiable parmi les autres zones de navigation.
Le dernier élément porte `aria-current="page"` et n'est jamais un lien.

RTL & multilingue

Le séparateur (`ChevronForward`) pointe toujours vers la fin de la ligne de lecture et se retourne automatiquement en arabe.
Le lien de retour mobile utilise `ChevronBack`, qui pointe vers le début de la ligne quel que soit le sens de lecture.

Propriétés

Breadcrumb

Propriété	Type	Défaut	Description
items*	{ label: string; href?: string }[]	—	Le dernier élément est la page courante ; les éléments sans `href` sont rendus en texte simple.
className	string	—	Classes Tailwind supplémentaires.