# 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.

## Playground

```html
<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

```html
<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

```html
<li class="back"><a href="/agendamentos">…Agendamentos</a></li>
```

## Anatomie

1.  **Niveaux supérieurs :** des liens.
2.  **Séparateur :** la flèche dessinée à la main, cachée pour les lecteurs d'écran.
3.  **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 avec `aria-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.
