Affiche un fil de liens qui montre à l'utilisateur sa position dans la hiérarchie du site, avec un affichage adapté au mobile et au desktop.
role="navigation" et aria-labelledby posés sur le conteneur — la région est identifiable
par les lecteurs d’écran sans configuration supplémentaire
(WCAG 1.3.1 (ouvre dans un nouvel onglet)href. aria-current="page" lui est appliqué automatiquement — conforme
WCAG 2.4.8 (ouvre dans un nouvel onglet)aria-hidden).aria-expanded. Son label est vocalisé
via une classe .sr-only — accessible sans être visible.label est le seul texte vocalisé — évitez les
labels génériques (“Page 1”, “Étape”) au profit de libellés qui situent l’utilisateur
(“Mon espace personnel”, “Résultats de recherche”).En dessous de 768px, le composant bascule automatiquement vers un affichage condensé :
aria-expanded — le comportement clavier et vocal est géré automatiquement.Pour observer ce rendu, utiliser les DevTools du navigateur en mode responsive.
En dessous de 768px, ar-breadcrumb émet ar-breadcrumb-show/ar-breadcrumb-shown (annulable puis confirmé) et ar-breadcrumb-hide/ar-breadcrumb-hidden à chaque changement d’état du dropdown condensé, avec detail: { id } :
const breadcrumb = document.querySelector('ar-breadcrumb');
breadcrumb.addEventListener('ar-breadcrumb-shown', () => console.log('Dropdown ouvert'));
breadcrumb.addEventListener('ar-breadcrumb-hidden', () => console.log('Dropdown fermé'));
Ces événements se déclenchent à chaque changement d’état du dropdown : clic sur le bouton toggle, mise à jour programmatique de la prop open, ou fermeture externe (clic en dehors, Escape) — pratique pour synchroniser un état d’UI externe ou pour de l’analytics.
Les exemples de cette page sont affichés avec le thème neutre du starter-kit.
Fil d'ariane avec 3 niveaux, le dernier élément actif.
<ar-breadcrumb>
<ar-breadcrumb-item label="Accueil" href="/accueil"></ar-breadcrumb-item>
<ar-breadcrumb-item label="Item 1" href="/item-1"></ar-breadcrumb-item>
<ar-breadcrumb-item label="Item 2" href="/item-2"></ar-breadcrumb-item>
<ar-breadcrumb-item label="Item actuel"></ar-breadcrumb-item>
</ar-breadcrumb>Un contenu posé dans le slot separator remplace le « / » par défaut ; il est cloné entre chaque item.
<ar-breadcrumb>
<span slot="separator">›</span>
<ar-breadcrumb-item label="Accueil" href="/accueil"></ar-breadcrumb-item>
<ar-breadcrumb-item label="Item-1" href="/journal"></ar-breadcrumb-item>
<ar-breadcrumb-item label="Item actuel"></ar-breadcrumb-item>
</ar-breadcrumb>Une icône SVG comme séparateur ; le contenu slotté fixe sa propre taille (width et height).
<ar-breadcrumb>
<svg slot="separator" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>
<ar-breadcrumb-item label="Accueil" href="/accueil"></ar-breadcrumb-item>
<ar-breadcrumb-item label="Item-1" href="/journal"></ar-breadcrumb-item>
<ar-breadcrumb-item label="Item actuel"></ar-breadcrumb-item>
</ar-breadcrumb>Manipulez les attributs pour voir le code et la preview se mettre à jour.
<ar-breadcrumb>
<ar-breadcrumb-item label="Accueil" href="/accueil"></ar-breadcrumb-item>
<ar-breadcrumb-item label="Item 1" href="/item-1"></ar-breadcrumb-item>
<ar-breadcrumb-item label="Item 2" href="/item-2"></ar-breadcrumb-item>
<ar-breadcrumb-item label="Item actuel"></ar-breadcrumb-item>
</ar-breadcrumb>Si vous utilisez l'autoloader, les composants détectés dans la pages sont chargés automatiquement, donc pas besoin de les importer individuellement.
Pour un import manuel, voici comment vous y prendre.
Importez ce composant depuis le CDN.
<script type="module" src="https://unpkg.com/@ariane-ui/core/dist/components/breadcrumb/index.js"></script>Après avoir installé le paquet via npm, vous pouvez importer le composant ainsi :
import '@ariane-ui/core/dist/components/breadcrumb/index.js';Contrôle programmatique du panel mobile. Reflété comme attribut HTML. Sans effet en mode desktop.
Icône du bouton "Retour" (mobile). Remplace le chevron SVG par défaut.
Séparateur entre les items en desktop (« / » par défaut).
Icône du bouton d'ouverture du panel (mobile). Remplace les 3 points SVG par défaut.
detail : { id: string | undefined }Émis avant l'ouverture du dropdown mobile.
detail : { id: string | undefined }Émis si ar-breadcrumb-show est annulé.
detail : { id: string | undefined }Émis après l'ouverture du dropdown mobile.
detail : { id: string | undefined }Émis avant la fermeture du dropdown mobile.
detail : { id: string | undefined }Émis si ar-breadcrumb-hide est annulé.
detail : { id: string | undefined }Émis après la fermeture du dropdown mobile.
Utilisez ::part(name) pour styler ces éléments depuis l'extérieur.
Certaines parts indiquent un rôle transverse, partagé avec d'autres composants — voir Personnalisation avancée.
Certaines parts portent un modificateur d'état (--) — voir Personnalisation avancée.
Racine du composant.
Le conteneur `role="list"` des liens (desktop ou mobile).
La liste desktop (variante d'état de `list`).
La liste mobile, affichée dans le panel (variante d'état de `list`).
Point d'ancrage décoratif pour le trait reliant les puces des items dans le panel mobile — position verticale, géométrie et couleur à la charge du thème.
Le lien "Retour" vers le premier item (mobile uniquement).
Le bouton d'ouverture du panel mobile.
Le panel mobile flottant.
Utilisez le sélecteur :state(name) sur le tag pour styler ce composant en fonction de son état.
Composable avec ::part() pour cibler un élément interne (ar-breadcrumb:state(name)::part(x)).
Sous Chrome et Edge 125, l'état est exposé avec le préfixe -- (:--name) : voir Compatibilité.
Le panel mobile est ouvert.
Ce composant utilise un panel flottant, partagé avec d'autres composants, qui expose des custom properties.
Les thèmes peuvent redéfinir ces tokens globalement via :root, ou par composant comme dans cet exemple :
ar-breadcrumb {
--ar-panel-radius: 1rem;
}Fond du panel partagé. Repli système `Canvas` si aucun thème n'est chargé.
Couleur du texte du panel partagé. Repli système `CanvasText` si aucun thème n'est chargé.
Couleur de bordure du panel partagé. Repli système `ButtonBorder` si aucun thème n'est chargé.
Rayon de bordure du panel partagé.
Ombre portée du panel partagé.
Espacement interne du panel partagé.
Largeur minimale du panel partagé.
Largeur maximale du panel partagé.
Durée de l'animation d'ouverture du panel partagé (respecte `prefers-reduced-motion`).
Il expose également des custom properties propres, personnalisables directement via :root.
Espacement entre le trigger et le panel mobile.
Décalage latéral du panel mobile.
Taille minimale (largeur/hauteur) du bouton retour/trigger mobile, repli WCAG 2.5.8 si aucun thème n'est chargé.
La langue de ce composant suit l'attribut lang de la page (<html lang>).
Vous pouvez appliquer une langue différente à une instance donnée en posant l'attribut lang directement dessus.
Voir la page Traductions pour le détail du mécanisme et la liste des traductions disponibles.
lang étant un attribut HTML natif, il n'apparaît pas dans le tableau « Attributs & Propriétés ».