# Breadcrumbs

Der Pfad vom Start bis zum aktuellen Bildschirm, damit die Person weiß, wo sie ist und ein paar Schritte zurückgehen kann.

## Playground

```html
<nav class="feitio-breadcrumbs" aria-label="Du bist hier"><ol><li><a href="#playground">Start</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">Wöchentliche Sicherung</span></li></ol></nav>
```

## Wann verwenden

-   Auf Bildschirmen zwei oder mehr Ebenen tief: ein Zeitplan innerhalb von Zeitplänen.

## Wann nicht verwenden

-   **Erste Ebene:** Die Navigation sagt bereits, wohin die Person ist.
-   **Als Historie:** es ist der Ort in der Struktur, nicht der Weg, den die Person genommen hat.

## Beispiele

### Der Pfad

Der aktuelle Bildschirm zuletzt, in weichem Text und ohne Link.

Code anzeigen

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

### Auf Mobilgeräten

Nur das Level darüber, mit dem Rückwärts-Pfeil.

Code anzeigen

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

## Anatomie

1.  **Ebenen darüber:** Links.
2.  **Trennzeichen:** der handgezeichnete Pfeil, vor Screenreadern unsichtbar.
3.  **Bildschirm:** weicher Text, kein Link.

## Do and don't

Do

Der aktuelle Bildschirm ohne Link: er führt nicht dorthin, wohin die Person bereits ist.

Don’t

Der aktuelle Bildschirm als Link mit einem Schrägstrich als Trennzeichen.

## Barrierefreiheit

-   Ein `<nav aria-label="You are here">` mit einer aufstehenden Liste.
-   Der aktuelle Bildschirm mit `aria-current="page"`; der Trennzeichen mit `aria-hidden`.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-breadcrumbs"`

im `<nav>`

Stufen in einer Reihe, die sich umrollen, wenn sie nicht passen.

`class="sep"`

mit `aria-hidden`

Der Pfeil zwischen den Stufen.

`aria-current="page"`

am aktuellen Bildschirm

Weicher Text, kein Link.

`class="back"`

on mobile

Nur das Level darüber, mit dem Rückwärts-Pfeil.
