Eine Breadcrumb Navigation zeigt als waagerechte Kette, wo eine Seite in der Hierarchie der Website liegt, etwa Start, Leistungen, Webdesign. Jedes Glied bis auf das letzte ist ein Link nach oben. Sie hilft Besuchern, die über eine Suchmaschine mitten in die Website einsteigen und den Weg dorthin nicht gegangen sind.
- Breadcrumb Navigation
Waagerechte Kette von Links, die den Weg von der Startseite zur gerade geöffneten Seite abbildet.
Beispiel: „Über die Breadcrumb Navigation kommst du von der Detailseite zurück in die Übersicht.“Auch: Breadcrumbs, Brotkrumennavigation oder Pfadnavigation. Das Bild stammt aus dem Märchen von Hänsel und Gretel, die ihren Weg mit Brotkrumen markieren.
Abgrenzung zur Hauptnavigation: Die Hauptnavigation ist auf jeder Seite gleich und zeigt das gesamte Angebot. Die Breadcrumb Navigation ändert sich mit jeder Seite und zeigt nur den Weg zu dieser einen Seite.
Wofür Besucher die Breadcrumb nutzen
Der häufigste Einstieg in eine Website führt heute über eine Unterseite aus den Suchergebnissen. Wer so ankommt, weiß nicht, wo er sich befindet. Die Breadcrumb beantwortet das in einer Zeile und bietet gleich den Weg nach oben an, auf die übergeordnete Übersicht mit den verwandten Angeboten.
Damit das trägt, muss die Kette die tatsächliche Struktur abbilden. Eine Breadcrumb, die den Klickweg des Besuchers nachzeichnet, ist unbrauchbar, weil derselbe Inhalt dann je nach Herkunft verschiedene Pfade zeigt. Abgebildet wird die Hierarchie der Seiten.
Das Markup: nav, ol und aria-current
Eine Breadcrumb ist eine Navigation und eine geordnete Liste. Beides gehört ins Markup, damit ein Screenreader sie ankündigen und überspringen kann. Das letzte Glied ist die aufgerufene Seite und deshalb kein Link.
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Start</a></li>
<li><a href="/leistungen/">Leistungen</a></li>
<li><span aria-current="page">Webdesign</span></li>
</ol>
</nav>Das Trennzeichen zwischen den Gliedern kommt über CSS und nicht als Textzeichen in die Liste. Sonst liest ein Screenreader bei jedem Glied ein Größerzeichen mit vor.
Breadcrumbs in den Suchergebnissen
Google zeigt in den Trefferlisten häufig einen Pfad statt der nackten URL. Die Grundlage dafür sind strukturierte Daten vom Typ BreadcrumbList nach schema.org. Auf unserer eigenen Website gibt jede Seite diesen Typ im gemeinsamen Graphen aus, und der Seitentitel aus dem Backend wirkt genau dort: Er bestimmt, wie das Glied im Pfad heißt.
Daraus folgt eine praktische Regel: Die Bezeichnung in der Breadcrumb sollte kurz sein und ohne den Kontext der Seite verständlich bleiben. Ein Glied namens „Unsere Leistungen im Überblick für Hamburger Unternehmen“ zerstört die Zeile, in den Suchergebnissen wie auf der Seite.
Wann eine Breadcrumb nichts bringt
Bei einer flachen Website mit fünf Seiten auf einer Ebene gibt es keinen Pfad abzubilden, und eine Breadcrumb würde nur Platz kosten. Dasselbe gilt für einen Onepager, bei dem alle Inhalte auf einer Seite liegen. Sinnvoll wird sie ab etwa drei Ebenen, also dort, wo Übersichtsseiten zwischen Startseite und Detailseite stehen.
Welche Ebenen es gibt und wie sie heißen, wird im Website-Konzept festgelegt. Die Breadcrumb macht diese Ordnung später sichtbar.