Breadcrumb, Orientierungspfad-Navigation im UI-Design

Breadcrumbs (Brotkrümel-Navigation) sind eine sekundäre Navigationskomponente, die den aktuellen Seitenpfad innerhalb der Hierarchie einer Website oder Anwendung als verlinkte Kette von Seiten anzeigt.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UI-Komponenten · Niveau: Einsteiger Synonyme / Auch bekannt als: Pfadnavigation, Navigations-Breadcrumb, Brotkrümel-Pfad, Sitepfad

Was ist ein Breadcrumb?

Der Begriff stammt aus dem Märchen „Hänsel und Gretel", Brotkrümel als Wegmarkierung. In der UI-Sprache übersetzt: eine visuelle Kette, die zeigt, wie der Nutzer von der Startseite zum aktuellen Punkt navigiert hat. Breadcrumbs sind sekundäre Navigation, sie ergänzen die Hauptnavigation, ersetzen sie aber nicht. Ihr Hauptnutzen liegt in der Orientierung bei tiefen Hierarchien und in der effizienten Rückwärtsnavigation ohne den Browser-Zurück-Button.

Erklärung

Varianten

Location-Based Breadcrumb (Standard): Zeigt die hierarchische Position der aktuellen Seite in der Site-Struktur. Unabhängig vom Navigationsweg des Nutzers. Beispiel: „Startseite > Kurse > UX Design > Grundlagen der Nutzerforschung". Dies ist die häufigste und empfehlenswerteste Variante.

Attribute-Based Breadcrumb: Zeigt die Eigenschaften / Filter, die zur aktuellen Ansicht geführt haben (z. B. in E-Commerce-Filteransichten): „Alle Produkte > Herren > Schuhe > Größe 42 > Blau". Technisch komplexer, da kein fixer Pfad.

History-Based Breadcrumb: Zeigt den tatsächlichen Klick-Verlauf des Nutzers. Entspricht dem Browser-Verlauf. Sehr selten, unpredictable und verwirrend, da sich der Pfad bei jedem Besuch ändert. Von der NNG nicht empfohlen.

Path Breadcrumb (Figma/Notion-Stil): Zeigt den Pfad innerhalb einer Dateistruktur oder Seiten-Hierarchie: „Workspace > Projekt > Unterseite". Für dateibasierte Applikationen.

Anatomie

• Breadcrumb-Liste: Horizontale Kette aus Links und Trennzeichen
• Links (Zwischenstationen): Klickbare Pfeile zurück zu übergeordneten Ebenen
• Trennzeichen / Separator: Visuelle Trennung zwischen Ebenen: „/" (Slash), „›" (Chevron-Symbol), „>" (Pfeil), „•" (Punkt)
• Aktuelles Element (letzter Eintrag): Nicht klickbar (Nutzer ist bereits dort), visuell unterschieden (fett, andere Farbe oder schlicht kein Link)
• Optional: Home-Icon: Erstes Element als Hausikon statt Text

Trunkierung bei langen Pfaden

Bei tiefen Hierarchien (5+ Ebenen) kann der Breadcrumb gekürzt werden:

• Erste und letzte 1–2 Ebenen immer sichtbar
• Mittlere Ebenen als „..." kollabiert
• Klick auf „..." expandiert die vollständige Kette

Accessibility (WCAG 2.1)

• <nav aria-label="Brotkrümel-Navigation"> oder <nav aria-label="Sie sind hier"> als Wrapper
• Breadcrumb-Liste als <ol> (ordered list), die Reihenfolge ist semantisch bedeutsam
• Aktuelles Element: aria-current="page" auf dem letzten Element
• Letztes Element muss kein Link sein (oder wenn Link: aria-current="page" gesetzt)
• Trennzeichen als aria-hidden="true" markieren, sind für Screenreader bedeutungslos
• Structured Data für SEO: BreadcrumbList JSON-LD Schema macht Breadcrumbs in Google-Suchergebnissen sichtbar

Beispiele

1. Amazon, Produktseite: Breadcrumb oberhalb des Produkttitels: „Elektronik › Computer › Laptops › Gaming-Laptops". Jede Ebene ist klickbar und führt zur entsprechenden Kategorieseite. Klarer Nutzen: Nutzer die eine Suche von innen beginnen, sehen sofort den Kontext.
2. Wikipedia: Breadcrumbs erscheinen bei Kategorieseiten: „Wikipedia:Kategorien › Technik › Informatik". Artikel selbst haben keine Breadcrumbs, flachere Hierarchie macht sie weniger nötig.
3. Mobile vs. Desktop: Auf Mobile werden Breadcrumbs oft auf die letzten 1–2 Ebenen reduziert oder ganz weggelassen, da horizontaler Platz knapp ist. Häufig nur der Zurück-Pfeil mit dem übergeordneten Seitennamen. iOS nutzt für App-Navigation den „Back"-Button mit dem Eltern-Seitennamen als Breadcrumb-Äquivalent.
4. Accessibility Best Practice: GOV.UK Breadcrumb-Implementierung: korrektes <nav aria-label="breadcrumb">, <ol> mit <li> Elementen, aria-current="page" auf dem letzten Element, Trennzeichen per CSS statt HTML generiert (unsichtbar für Screenreader).
5. Häufiger Fehler: Das aktuelle Seitenelement als Link mit href auf die eigene Seite auszeichnen. Das verwirrt Nutzer (warum ist die aktuelle Seite klickbar?) und ist semantisch falsch. Das letzte Breadcrumb-Element ist immer nicht-klickbar oder zeigt mit aria-current="page" die aktuelle Seite an.

In der Praxis

SEO-Bonus: Korrekt implementierte Breadcrumbs mit JSON-LD Schema werden in Google-Suchergebnissen als Rich Snippets angezeigt, die Kategoriestruktur erscheint unter dem Seitentitel. Dies verbessert Klickrate und Nutzerverständnis direkt in der SERP.

Figma: Breadcrumb als Komponente mit variablen Anzahl von Items (via Auto Layout + Variants für 2–5 Ebenen). Separator als Icon-Komponente. Letztes Item mit Type-Variant „Current" (kein Unterstrich, gedämpfte Farbe).

HTML/CSS-Grundstruktur: ```html <nav aria-label="Sie sind hier"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="/"> <svg aria-hidden="true"><!-- Home Icon --></svg> <span class="visually-hidden">Startseite</span> </a> </li> <li class="breadcrumb-item" aria-hidden="true" class="separator">›</li> <li class="breadcrumb-item"> <a href="/wiki">Wiki</a> </li> <li class="breadcrumb-item" aria-hidden="true" class="separator">›</li> <li class="breadcrumb-item"> <a href="/wiki/mediendesign-digitale-medien">Mediendesign</a> </li> <li class="breadcrumb-item" aria-hidden="true" class="separator">›</li> <li class="breadcrumb-item breadcrumb-current" aria-current="page"> UI-Komponenten </li> </ol> </nav>

<!-- JSON-LD für SEO (im <head>) --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ {"@type": "ListItem", "position": 1, "name": "Startseite", "item": "https://lazi-akademie.de"}, {"@type": "ListItem", "position": 2, "name": "Wiki", "item": "https://lazi-akademie.de/wiki"}, {"@type": "ListItem", "position": 3, "name": "UI-Komponenten"} ] } </script> ```

Vergleich & Abgrenzung

Breadcrumbs und Hauptnavigation ergänzen sich: Hauptnavigation sagt „Wo kann ich hin?", Breadcrumb sagt „Wo bin ich gerade?".

Häufige Fragen (FAQ)

Auf welchen Seiten brauche ich keine Breadcrumbs? Breadcrumbs sind unnötig auf: der Startseite (kein Pfad anzuzeigen), flachen Ein-Ebene-Sites ohne Hierarchie, Landing Pages (Breadcrumbs leiten von der Conversion weg), und sehr kleinen Sites mit wenigen Seiten (unter 20 Seiten). Breadcrumbs sind wertvoll ab einer Tiefe von mindestens 3 Hierarchieebenen.

Welches Trennzeichen ist für Breadcrumbs am besten? Das einfache Chevron „›" oder „>" ist am weitesten verbreitet und von Nutzern universell verstanden. Der Slash „/" kann mit URL-Pfaden verwechselt werden. Am wichtigsten: Das Trennzeichen per CSS generieren (nicht als HTML), damit Screenreader es nicht vorlesen.

Verwandte Einträge

• Navigation Bar
• Sidebar Navigation
• Pagination
• Informationsarchitektur

Weiterführend

• Nielsen Norman Group, „Breadcrumbs in Web Design": nngroup.com/articles/breadcrumb-navigation-useful
• Google Search Central, Breadcrumb Structured Data: developers.google.com/search/docs/appearance/structured-data/breadcrumb
• WAI-ARIA Authoring Practices, Breadcrumb: w3.org/WAI/ARIA/apg/patterns/breadcrumb
• Material Design 3, Navigation (Breadcrumbs): m3.material.io