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