Fil d'ariane
Le fil d'ariane indique la position de l'utilisateur dans la hiérarchie de l'application. Il permet de remonter rapidement vers les niveaux parents.
Base
Un tableau d'items ordonnés. Le dernier item est l'item courant : il n'a pas de lien
et reçoit automatiquement aria-current="page".
<twig:Breadcrumb :items="[
{label: 'Design System', href: '/'},
{label: 'Composants', href: '/components'},
{label: 'Fil d\'ariane'}
]" />
Profondeur
Le composant s'adapte à n'importe quel nombre de niveaux. Deux niveaux suffisent pour la plupart des pages.
<!-- 2 niveaux -->
<twig:Breadcrumb :items="[
{label: 'Design System', href: '/'},
{label: 'Composants'}
]" />
<!-- 3 niveaux -->
<twig:Breadcrumb :items="[
{label: 'Design System', href: '/'},
{label: 'Principes', href: '/fondations'},
{label: 'Couleurs'}
]" />
Séparateur personnalisé
Le séparateur est / par défaut. On peut le remplacer par n'importe
quel identifiant UX Icons (format prefix:name).
:). Rendu en SVG, aria-hidden.
<twig:Breadcrumb :items="[...]" separator="bi:chevron-right" />
API du composant
| Prop | Type | Défaut | Description |
|---|---|---|---|
items |
array | [] |
Liste ordonnée des niveaux. Chaque item : {label, href?}. Le dernier item est la page courante (sans href). |
separator |
string | '/' |
Séparateur entre les items. Si contient :, interprété comme un identifiant UX Icons et rendu en SVG. |
Do & Don't
-
Laisser le dernier item sans
href, c'est la page courante -
Placer le fil d'ariane juste avant le
<h1>de la page - Utiliser des labels courts et fidèles au titre de la page cible
-
Ne pas mettre de
hrefsur le dernier item - Ne pas coder les séparateurs manuellement dans les templates
- Ne pas utiliser plus de 4 niveaux : simplifier la structure de navigation
Règles
Toujours utiliser <twig:Breadcrumb>.
Ne jamais coder un fil d'ariane avec des <a>
et <span> manuels.
Le dernier item représente toujours la page en cours. Il ne doit jamais être un lien cliquable.