Breadcrumbs
Der Pfad vom Start bis zum aktuellen Bildschirm, damit die Person weiß, wo sie ist und ein paar Schritte zurückgehen kann.
Auf dieser Seite
Playground
Ebenen
Hintergrund
<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
<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
<li class="back"><a href="/agendamentos">…Agendamentos</a></li>Anatomie
- Ebenen darüber: Links.
- Trennzeichen: der handgezeichnete Pfeil, vor Screenreadern unsichtbar.
- 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 mitaria-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. |