Breadcrumbs
Le chemin du début à l'écran actuel, afin que la personne sache où elle se trouve et puisse revenir quelques étapes en arrière.
Sur cette page
Playground
Niveaux
Fond
<nav class="feitio-breadcrumbs" aria-label="Vous êtes ici"><ol><li><a href="#playground">Accueil</a></li><li><span class="sep" aria-hidden="true"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg></span><span aria-current="page">Sauvegarde hebdomadaire</span></li></ol></nav>Quand l'utiliser
- Sur des écrans deux niveaux ou plus profonds : un calendrier dans Calendriers.
Quand ne pas l'utiliser
- Au premier niveau : le Nav indique déjà où la personne se trouve.
- Comme historique : c'est l'endroit dans la structure, pas le chemin emprunté par la personne.
Exemples
Le chemin
L'écran actuel en dernier, en texte doux et sans lien.
Afficher le code
<nav class="feitio-breadcrumbs" aria-label="Você está em">
<ol>
<li><a href="/">Início</a></li>
<li><span class="sep" aria-hidden="true">…</span><a href="/agendamentos">Agendamentos</a></li>
<li><span class="sep" aria-hidden="true">…</span><span aria-current="page">Backup semanal</span></li>
</ol>
</nav>Sur mobile
Seulement le niveau supérieur, avec la flèche retour.
Afficher le code
<li class="back"><a href="/agendamentos">…Agendamentos</a></li>Anatomie
- Niveaux supérieurs : des liens.
- Séparateur : la flèche dessinée à la main, cachée pour les lecteurs d'écran.
- Ecran actuel : texte doux, sans lien.
Faire et ne pas faire
Do
L'écran actuel sans lien : il ne mène pas là où la personne se trouve déjà.
Don’t
L'écran actuel en tant que lien, avec un slash comme séparateur.
Accessibilité
- Un
<nav aria-label="You are here">avec une liste ordonnée. - L'écran actuel avec
aria-current="page"; le séparateur avecaria-hidden.
Attributs
| Attribut | Valeurs | Pour quoi |
|---|---|---|
class="feitio-breadcrumbs" | sur l'élément <nav> | Niveaux en ligne, qui s'enroulent lorsqu'ils ne tiennent pas. |
class="sep" | avec aria-hidden | La flèche entre les niveaux. |
aria-current="page" | sur l'écran actuel | Texte doux, sans lien. |
class="back" | sur mobile | Uniquement le niveau supérieur, avec la flèche de retour. |