Die Breadcrumb-Navigation ist eines der unscheinbarsten Elemente einer Website und zugleich eines der umstrittensten. Auf dem Smartphone wird der Pfad zu lang und bricht in die zweite Zeile um. Screenreader lesen Trennzeichen mit, im ungünstigen Fall als „Schrägstrich“ zwischen jedem Link, wie Scott O’Hara in Tests mit NVDA beschreibt (öffnet in neuem Tab) (öffnet neues Fenster). Und Google zeigt den Pfad in mobilen Suchergebnissen seit dem 23. Januar 2025 nicht mehr an (öffnet in neuem Tab) (öffnet neues Fenster).
Lohnt sich der Aufwand also noch? Meine Antwort: ja, wenn der Pfad eine einzige Frage beantwortet, nämlich „Wo bin ich?“. In diesem Ratgeber zeige ich Ihnen, was Studien und große Designsysteme empfehlen, wo sie sich widersprechen und wie ich mich in diesen Fällen entscheide.
Der Beitrag hat zwei Teile. Teil 1 richtet sich an Website-Verantwortliche, Shop-Betreiber und Webdesigner, die festlegen, wie der Pfad aussieht. Teil 2 richtet sich an Entwicklerinnen und Entwickler, die ihn umsetzen. Stand: November 2026.
Das Wichtigste in Kürze
- Eine Breadcrumb-Navigation beantwortet die Frage „Wo bin ich?“ und zeigt die Struktur, nicht den Klickweg.
- Auf dem Smartphone zeigen Sie so viel vom Pfad, wie auf eine Zeile passt; die Elternseite bleibt immer sichtbar.
- Die aktuelle Seite steht als Text ohne Link und ist mit
aria-current="page"ausgezeichnet. - Trennzeichen wie „/“ aus CSS werden oft vorgelesen; eine reine CSS-Form oder ein leerer Alternativtext verhindert das.
- Jeder Link braucht eine Tippfläche von mindestens 24 × 24 CSS-Pixeln.
- Google zeigt den Pfad seit Januar 2025 nur noch in Desktop-Ergebnissen; das Markup bleibt sinnvoll.
Teil 1: Konzeption und Redaktion
Was ist eine Breadcrumb-Navigation und wann lohnt sie sich?
Eine Breadcrumb-Navigation ist eine Zeile mit Links, die zeigt, wo eine Seite in der Struktur einer Website steht, zum Beispiel Start, Blog, UX, Beitrag. Sie lohnt sich auf Websites mit mindestens drei Ebenen und vielen Einstiegen über Suchmaschinen. Auf flachen Websites und in Bestellabläufen ist sie überflüssig.
Der Name spielt auf die Brotkrumen aus „Hänsel und Gretel“ an; im Deutschen heißt das Element Brotkrümelnavigation oder Brotkrumennavigation. Eine Kurzdefinition im Glossar finden Sie bei mir ebenfalls. In der Praxis begegnen Ihnen drei Arten:
| Art | Was sie zeigt | Wann sinnvoll |
|---|---|---|
| Position (Hierarchie) | Den Ort der Seite in der Struktur | Der Normalfall für Websites und Shops |
| Pfad (Verlauf) | Die zuletzt besuchten Seiten | Kaum; dafür gibt es den Zurück-Button des Browsers |
| Attribut (Filter) | Gesetzte Filter im Shop | Als eigene Filterleiste, nicht als Pfad |
Ich empfehle fast immer die Position. Auch die Nielsen Norman Group rät, die Hierarchie zu zeigen und nicht den Sitzungsverlauf (öffnet in neuem Tab) (öffnet neues Fenster). Die Breadcrumb-Navigation ergänzt dabei die Hauptnavigation, sie ersetzt sie nicht.
Weglassen sollten Sie den Pfad in drei Fällen:
- Ihre Website hat nur ein oder zwei Ebenen.
- Es handelt sich um die Startseite, wie auch das Designsystem der US-Regierung (USWDS) (öffnet in neuem Tab) (öffnet neues Fenster) festhält.
- Die Seite ist Teil eines linearen Ablaufs wie Bestellung oder Antrag; das GOV.UK Design System (öffnet in neuem Tab) (öffnet neues Fenster) rät hier ausdrücklich ab.
Für die Barrierefreiheit ist der Pfad mehr als ein Extra. Das Erfolgskriterium 2.4.8 „Ort“ der WCAG (Web Content Accessibility Guidelines) verlangt, dass Nutzer erkennen, wo sie sich innerhalb einer Website befinden. Als ausreichende Technik dafür nennt das W3C den Breadcrumb (öffnet in neuem Tab) (öffnet neues Fenster) (Technik G65). Das Kriterium gehört zur höchsten Stufe AAA und ist damit für die meisten Websites keine Pflicht, aber ein klarer Hinweis auf den Nutzen.
Wohin gehört der Breadcrumb auf der Seite?
Die Breadcrumb-Navigation gehört an den oberen Rand des Inhalts, unter die Hauptnavigation und direkt über die Hauptüberschrift. Dort suchen Nutzer sie, und dort empfehlen sie sowohl die Nielsen Norman Group als auch die Designsysteme von IBM und Atlassian. Für Google spielt die Position keine Rolle.
IBM Carbon setzt den Pfad oben links über den Seitentitel (öffnet in neuem Tab) (öffnet neues Fenster), Atlassian ebenso. Eine Besonderheit hat GOV.UK: Dort steht der Pfad vor dem Hauptinhaltsbereich, damit ein Sprunglink „Zum Inhalt“ ihn überspringt. Tastaturnutzer müssen sich dann nicht auf jeder Seite durch dieselben Links bewegen.
Zur Suchmaschinenoptimierung sagte Googles John Mueller 2021, die Platzierung sei egal; Google nutze den Pfad unabhängig davon zum Crawlen und für die Darstellung im Suchergebnis (öffnet in neuem Tab) (öffnet neues Fenster). Entscheiden Sie die Position also allein nach Nutzerführung.
Ganzer Pfad oder nur die Elternseite: Was gilt auf dem Smartphone?
Zeigen Sie auf dem Smartphone so viel vom Pfad, wie auf eine Zeile passt, und lassen Sie die Elternseite immer sichtbar. Reicht der Platz nicht, klappen Sie die mittleren Ebenen ein oder machen die Zeile wischbar. Nur die Elternseite zu zeigen, genügt bei flachen Strukturen.
Diese Empfehlung ist ein Kompromiss, denn die zwei wichtigsten Quellen widersprechen sich. Die Nielsen Norman Group rät, mobil nur die letzte oder die letzten zwei Ebenen zu zeigen und den Pfad nie über mehrere Zeilen umbrechen zu lassen (öffnet in neuem Tab) (öffnet neues Fenster). Das Baymard Institute fand in mobilen Tests dagegen Probleme, wenn nur die Elternseite steht: Nutzer sahen nur eine Ebene pro Tipp, verloren den Überblick über die Struktur und hielten den Link teils für einen Zurück-Link. Baymard bevorzugt deshalb den vollen Pfad als wischbare Leiste (öffnet in neuem Tab) (öffnet neues Fenster); Startseite und aktuelle Seite wegzulassen, schadete in den Tests nicht.
Auch die großen Designsysteme lösen die Frage unterschiedlich:
| Quelle | Empfehlung auf kleinen Bildschirmen |
|---|---|
| Nielsen Norman Group (2018, überprüft 2026) | Letzte ein bis zwei Ebenen, kein Umbruch |
| Baymard Institute (2020) | Voller Pfad, horizontal wischbar |
| IBM Carbon | Erste zwei und letzte zwei Ebenen, Mitte im Menü |
| Microsoft Fluent 2 | Erste und letzte Ebene; bei sehr wenig Platz nur die letzte |
| GOV.UK | Optional nur erste und letzte Ebene |
| USWDS (ab Version 3.14.0, August 2026) | Umbruch als Standard, optional auf eine Zeile gekürzt |
„Eine Breadcrumb-Navigation muss nicht die ganze Reise abbilden. Sie beantwortet eine einzige Frage: Wo bin ich?“
Martin Mutter
Die Belege dazu finden Sie bei Microsoft Fluent 2 (öffnet in neuem Tab) (öffnet neues Fenster) und in den oben verlinkten Quellen. Im November 2026 wurde die Frage auch unter UX-Fachleuten auf LinkedIn diskutiert. Dort fiel die Empfehlung zugunsten der Elternseite mit Pfeil aus, ausdrücklich als Ausnahme von der Regel, die Position in der Hierarchie zu zeigen.
Ich entscheide nach dieser Reihenfolge:
- Passt der Pfad ohne Startseite auf eine Zeile, zeigen Sie ihn ganz.
- Passt er nicht, klappen Sie die Mitte ein und lassen erste Ebene und Elternseite sichtbar.
- Ist die Struktur flach (höchstens zwei Ebenen unter der Startseite), reicht die Elternseite mit ihrem Namen.
- Bricht die Breadcrumb-Navigation trotz allem um, ist meist die Struktur zu tief, nicht der Pfad zu lang.
Ein Rechenbeispiel zeigt, wie schnell das passiert. Der Pfad „Start / Damen / Bekleidung / Jacken & Mäntel / Übergangsjacken / Steppjacke Lina“ belegt auf einem 360 Pixel breiten Smartphone bei 16 Pixeln Schriftgröße drei Zeilen, ohne Startseite noch zwei. Erst wenn die Mitte eingeklappt ist und die aktuelle Seite entfällt, weil die Hauptüberschrift direkt folgt, passt „Damen / … / Übergangsjacken“ auf eine Zeile. Gemessen habe ich das im November 2026 in Chrome mit einer Standardschrift; mit Ihrer Schrift und Ihren Abständen kann das Ergebnis abweichen.
Moderne Muster für Breadcrumbs auf dem Smartphone
Neben der Grundsatzfrage gibt es eine Reihe von Mustern, die die Breadcrumb-Navigation auf kleinen Bildschirmen handhabbar machen. Nicht alle sind belegt. Ich ordne sie deshalb nach Nutzen, Risiko und Beleglage ein.
Mitte einklappen
Die mittleren Ebenen verschwinden hinter einer Schaltfläche „…“, Anfang und Ende bleiben sichtbar. Das spart Platz und verhindert den Umbruch. Baymard warnt jedoch, dass die Auslassung Information verbirgt und leicht übersehen wird. Die Schaltfläche braucht außerdem einen zugänglichen Namen, bei Atlassian etwa „Show more breadcrumbs“ (öffnet in neuem Tab) (öffnet neues Fenster), und eine ausreichend große Tippfläche.
Wischbare Leiste
Der volle Pfad steht in einer Zeile, die sich seitlich verschieben lässt. Wichtig ist ein sichtbarer Anschnitt am Rand, damit Nutzer erkennen, dass mehr kommt; das betont Baymard ausdrücklich. Testen Sie diese Variante zusätzlich mit Tastatur und bei 320 Pixeln Breite, denn eine Studie speziell zu wischbaren Breadcrumbs und Barrierefreiheit kenne ich nicht.
Zurück-Link mit Namen der Elternseite
Statt eines Pfads steht nur ein Link wie „Zurück zu: Ratgeber UX“. Apple setzt in Apps auf einen Zurück-Button mit Symbol (öffnet in neuem Tab) (öffnet neues Fenster). Auf Websites rate ich zum Namen der Elternseite: Ein reiner Pfeil nennt keinen Ort und wird leicht mit dem Zurück-Button des Browsers verwechselt.
Navigation unten, fixiert oder ausgeblendet: Konzepte ohne Beleg
Manche Entwürfe docken den Pfad unten am Bildschirm an, wo der Daumen hinkommt, fixieren ihn beim Scrollen oder blenden ihn beim Scrollen aus. Für keines dieser Muster habe ich eine Studie oder eine Empfehlung eines großen Designsystems gefunden. Die Risiken dagegen sind konkret: Eine fixierte Leiste darf das Element mit dem Tastaturfokus nicht verdecken (WCAG 2.4.11), sie konkurriert unten mit der Tab-Leiste und kostet Platz. Ich behandle diese Muster als Experiment, nicht als Standard.
„Für fixierte oder unten angedockte Breadcrumbs kenne ich keine Studie. Ich setze sie erst ein, wenn ein Test mit echten Nutzern zeigt, dass sie die Orientierung verbessern.“
Martin Mutter
Einstieg über die Suche: ein fester Pfad, ein Zurück-Link
Wer über eine Suche oder einen Filter auf eine Seite kommt, möchte oft zurück zu den Ergebnissen. Den Pfad deshalb je nach Einstieg umzubauen, verwirrt jedoch. Baymard empfahl schon 2013 eine Kombination: einen festen Hierarchie-Pfad plus einen Link „Zurück zu den Ergebnissen“ (öffnet in neuem Tab) (öffnet neues Fenster). Gehört eine Seite zu mehreren Bereichen, zeigen Sie trotzdem nur einen festen Pfad.
Gehören Filter in den Breadcrumb?
Nein, gesetzte Filter gehören in eine eigene Leiste mit Schaltflächen zum Entfernen, nicht in die Breadcrumb-Navigation. Sie zeigt den Ort einer Seite; Filter sind Einstellungen, die Nutzer ändern wollen. Wer beides mischt, erzeugt Links, die beim Klick die gesetzten Filter verwerfen.
Genau das beschrieb Baymard schon 2013: Hierarchie-Links setzen Filter und Sortierung zurück. Gestalten Sie gesetzte Filter deshalb als Schaltflächen mit eindeutigem Namen, etwa „Filter Farbe: Blau entfernen“, außerhalb des Navigationsbereichs. Weitere belegte Regeln, etwa zur Anzeige gesetzter Filter, finden Sie in meiner Checkliste UX Best Practices.
Eine lange Breadcrumb-Navigation im Shop ist außerdem oft ein Strukturproblem. In der aktuellen Auswertung von Baymard legen 79 Prozent der untersuchten Shops Kategorien an, wo Filter besser wären (öffnet in neuem Tab) (öffnet neues Fenster) (Stand Oktober 2026). Wie Kategorien und Filter mit der Suchmaschinenoptimierung zusammenspielen, beschreibe ich im Beitrag SEO für Onlineshops.
Breadcrumb-Navigation und SEO: Was Google heute zeigt
Google zeigt den Pfad seit dem 23. Januar 2025 nur noch in Suchergebnissen auf dem Desktop. Auf dem Smartphone steht dort nur die Domain, weil der Pfad auf kleinen Bildschirmen abgeschnitten wurde. Websites müssen laut Google nichts ändern: Das Markup wird weiter unterstützt, der Bericht in der Search Console und der Test für Rich Results bleiben.
Wichtiger als die Anzeige ist das Crawlen. Google nutzt die Breadcrumb-Navigation, um übergeordnete Seiten zu finden; mehr dazu, wie der Googlebot crawlt, steht in meinem Beitrag. Dabei zählen die sichtbaren Links. Zu Links, die nur in strukturierten Daten stehen, sagte John Mueller 2022, sie würden vielleicht gefunden, vielleicht nicht (öffnet in neuem Tab) (öffnet neues Fenster); wer einen Link wolle, solle einen echten HTML-Link setzen.
Zwei Punkte aus der Google-Dokumentation zu BreadcrumbList (öffnet in neuem Tab) (öffnet neues Fenster) werden oft übersehen:
- Der Pfad soll den typischen Weg eines Nutzers abbilden, nicht die URL-Struktur.
- Mehrere Pfade pro Seite sind technisch zulässig.
Für Nutzer bleibe ich trotzdem bei einem sichtbaren Pfad, wie oben begründet. Eine direkte Wirkung der Breadcrumb-Navigation auf das Ranking hat Google nicht bestätigt. Ihr Nutzen liegt in der internen Verlinkung, im Verständnis der Struktur und in der Desktop-Darstellung.
Lesen KI-Crawler Breadcrumbs?
KI-Crawler können eine Breadcrumb-Navigation nur lesen, wenn sie als Text im ausgelieferten HTML steht. Die Crawler von OpenAI und Anthropic führen kein JavaScript aus; ein nachträglich per Skript eingefügter Pfad bleibt für sie unsichtbar. Dass Breadcrumb-Markup die Zitierung in KI-Antworten fördert, ist nicht belegt.
Die Aussage zum JavaScript stammt aus einer Messung von Vercel und MERJ vom Dezember 2024 (öffnet in neuem Tab) (öffnet neues Fenster). Googlebot rendert JavaScript dagegen, und Google schreibt, für Google AI Overviews und den KI-Modus seien keine besonderen strukturierten Daten nötig (öffnet in neuem Tab) (öffnet neues Fenster).
Zum Markup gibt es zwei aktuelle Auswertungen. SISTRIX fand bei 48.527 von KI-Systemen zitierten Seiten im deutschsprachigen Raum für Breadcrumb-Schema (zusammen mit HowTo und QAPage) den Faktor 1,0, also keinen Zusammenhang mit der Zitierung (öffnet in neuem Tab) (öffnet neues Fenster); das ist eine Korrelation, kein Beweis. Ahrefs verglich 1.885 Seiten, die nachträglich strukturierte Daten erhielten, mit Kontrollseiten und fand keinen messbaren Anstieg der KI-Zitate (öffnet in neuem Tab) (öffnet neues Fenster). Microsoft wiederum schreibt, Schema helfe Suchmaschinen und KI-Systemen beim Verstehen von Inhalten (öffnet in neuem Tab) (öffnet neues Fenster).
Eine Studie, die Breadcrumbs gezielt mit KI-Zitaten untersucht, kenne ich nicht. Meine Einschätzung: Der sichtbare Pfad im HTML ist der robustere Kontextträger, weil jede Software ihn als Text lesen kann. Das Markup ist für Google weiter sinnvoll, für KI-Antworten aber kein Hebel.
Teil 2: Umsetzung im Code
Wie sieht barrierefreies Breadcrumb-HTML aus?
Barrierefreies HTML für die Breadcrumb-Navigation besteht aus einem beschrifteten nav-Element, einer geordneten Liste mit Links und der aktuellen Seite als Text. Die aktuelle Seite trägt aria-current="page", damit Screenreader sie als „aktuelle Seite“ ansagen. So folgt das Markup dem Muster des W3C.
Das folgende Beispiel können Sie als Grundlage übernehmen; Pfade und Bezeichnungen passen Sie an Ihre Website an:
<nav aria-label="Brotkrümelpfad">
<ol class="breadcrumb" role="list">
<li><a href="/">Start</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/blog/ux/">UX</a></li>
<li><span aria-current="page">Breadcrumb-Navigation</span></li>
</ol>
</nav>Drei Entscheidungen stecken darin. Erstens beschriftet aria-label den Navigationsbereich; das Wort „Navigation“ lasse ich weg, weil der Screenreader die Rolle selbst ansagt. Zweitens hält role="list" die Liste für VoiceOver erkennbar, wenn Sie die Listenpunkte per CSS entfernen; darauf weist Scott O’Hara hin (öffnet in neuem Tab) (öffnet neues Fenster). Drittens ist die aktuelle Seite kein Link.
Beim letzten Punkt sind sich die Quellen nicht einig:
| Quelle | Aktuelle Seite im Pfad | Als Link |
|---|---|---|
| W3C Authoring Practices | ja | ja, mit aria-current |
| MDN, USWDS, Nielsen Norman Group | ja | nein |
| GOV.UK, IBM Carbon (Standard) | nein | entfällt |
Das Muster der W3C Authoring Practices (öffnet in neuem Tab) (öffnet neues Fenster) erlaubt also einen Link, die Anleitung von MDN (öffnet in neuem Tab) (öffnet neues Fenster) setzt die aktuelle Seite als Text. Ich folge der Mehrheit: Text ohne Link, denn ein Link auf die Seite, auf der man schon ist, hat keinen Nutzen. Folgt die Hauptüberschrift direkt darunter, können Sie die aktuelle Seite auch ganz weglassen, wie es Smart Interface Design Patterns empfiehlt (öffnet in neuem Tab) (öffnet neues Fenster).
Werden Trennzeichen vom Screenreader vorgelesen?
Ja, Textzeichen wie „/“ oder „>“, die per CSS-Eigenschaft content eingefügt werden, lesen viele Screenreader vor, obwohl sie reine Dekoration sind. Sauber sind drei Wege: eine reine CSS-Form ohne Zeichen, ein leerer Alternativtext für das Zeichen oder ein eigenes Element mit aria-hidden="true".
MDN hält fest, dass per content erzeugte Zeichen an Hilfstechnik weitergegeben werden (öffnet in neuem Tab) (öffnet neues Fenster). Adrian Roselli beschreibt, dass das Verhalten je Browser und Screenreader schwankt und dekorative Zeichen in Lesereihenfolge vorgelesen werden (öffnet in neuem Tab) (öffnet neues Fenster). Sara Soueidan zeigt, dass Chrome und Firefox solchen Inhalt im Barrierefreiheitsbaum offenlegen und in den zugänglichen Namen einrechnen (öffnet in neuem Tab) (öffnet neues Fenster).
Die drei Wege im Vergleich:
- CSS-Form statt Zeichen: Ein schräg gestellter Rahmen oder ein Dreieck enthält keinen Text und wird deshalb nicht vorgelesen. So löst es das W3C-Beispiel. Das ist der robusteste Weg.
- Leerer Alternativtext: Die Schreibweise mit Schrägstrich hinter dem Zeichen gibt ihm einen leeren Alternativtext. Laut caniuse unterstützen das Browser mit 95,8 Prozent globaler Nutzung (öffnet in neuem Tab) (öffnet neues Fenster) (Stand November 2026).
- Eigenes Element: Das Zeichen steht als
spanim HTML und ist mitaria-hidden="true"vor Hilfstechnik verborgen.
Für den zweiten Weg genügt diese CSS-Regel, die zu dem HTML-Beispiel oben passt:
.breadcrumb li + li::before {
content: "/" / "";
padding-inline: 0.5em;
}Mein eigener Test bestätigt das. Am 9. November 2026 habe ich die drei stummen Wege und zwei Gegenproben im Barrierefreiheitsbaum von Chrome geprüft (Chromium 153). Diesen Baum reicht der Browser an Screenreader wie NVDA, JAWS oder TalkBack weiter; was dort als Text steht, kann vorgelesen werden. „Wird vorgelesen“ heißt in der Tabelle: Das Zeichen steht als eigener Text vor jedem Eintrag außer dem ersten.
| Variante | Trennzeichen |
|---|---|
Zeichen per content ohne Alternativtext | wird vorgelesen |
Zeichen per content mit leerem Alternativtext | stumm |
Zeichen als span mit aria-hidden="true" | stumm |
| CSS-Form ohne Zeichen (gedrehter Rahmen) | stumm |
| Zeichen direkt im HTML | wird vorgelesen |
In allen fünf Varianten bleibt die Liste mit ihren vier Einträgen erhalten, die Struktur geht also nicht verloren. Zwei Grenzen hat der Test: Er zeigt, was Chrome weitergibt, nicht, wie jeder Screenreader es ausspricht. Firefox und Safari habe ich nicht geprüft; dort kann das Verhalten abweichen, wie Adrian Roselli beschreibt. Prüfen Sie Ihre eigene Umsetzung deshalb zusätzlich mit dem Screenreader, den Ihre Nutzer verwenden.
WCAG-Kriterien für Tippflächen, Fokus und Zoom
Für die Breadcrumb-Navigation sind sieben Erfolgskriterien der WCAG 2.2 (öffnet in neuem Tab) (öffnet neues Fenster) wichtig. Mit ihnen prüfen Sie, ob der Pfad für alle bedienbar ist, auch mit Tastatur, Vergrößerung oder zittriger Hand. Welche Pflichten sich aus der Barrierefreiheit insgesamt ergeben, fasse ich im Beitrag zur digitalen Barrierefreiheit zusammen.
| Kriterium | Stufe | Bedeutung für den Pfad |
|---|---|---|
| 1.3.1 Info und Beziehungen | A | Navigationsbereich und Liste sind im Code erkennbar |
| 1.4.3 Kontrast | AA | Text mindestens 4,5 : 1 |
| 1.4.10 Umfluss | AA | Bei 320 Pixeln Breite kein Scrollen in zwei Richtungen |
| 2.4.7 Fokus sichtbar | AA | Jeder Link zeigt den Tastaturfokus |
| 2.4.11 Fokus nicht verdeckt | AA | Fixierte Leisten verdecken den Fokus nicht |
| 2.5.8 Zielgröße | AA | Mindestens 24 × 24 CSS-Pixel je Link oder genug Abstand |
| 2.4.8 Ort | AAA | Der Pfad zeigt, wo die Seite steht |
Bei der Zielgröße lohnt ein genauer Blick. Die WCAG nennen 24 × 24 CSS-Pixel als Minimum (öffnet in neuem Tab) (öffnet neues Fenster), mit einer Ausnahme für Links innerhalb eines Satzes. Breadcrumb-Links stehen nicht in einem Satz; die Ausnahme greift aus meiner Sicht daher kaum. Andere Quellen setzen höher an:
- Apple (iPhone und iPad): 44 × 44 Punkt als Standard, 28 × 28 Punkt als Minimum (öffnet in neuem Tab) (öffnet neues Fenster)
- Android: 48 × 48 dp (öffnet in neuem Tab) (öffnet neues Fenster)
- Nielsen Norman Group: 1 × 1 cm
- Baymard: 7 × 7 mm mit 2 mm Abstand
„Breadcrumbs nützen nur, wenn sie gut lesbar und treffsicher zu klicken sind. Alles andere ist Dekoration.“
Martin Mutter
Die Schrift darf dabei klein bleiben. Entscheidend ist die Fläche, die auf einen Tipp reagiert, also Text plus Innenabstand.
BreadcrumbList-Markup für die Breadcrumb-Navigation
Damit Google den Pfad im Desktop-Suchergebnis zeigen kann, braucht die Seite strukturierte Daten vom Typ BreadcrumbList; eine Garantie für die Anzeige ist das Markup nicht. Pflicht sind eine geordnete Liste mit mindestens zwei Einträgen und je Eintrag Name, Position und URL; beim letzten Eintrag darf die URL fehlen. Wie strukturierte Daten grundsätzlich funktionieren, erkläre ich im Beitrag über strukturierte Daten.
In der Praxis gilt eine Regel: Erzeugen Sie sichtbaren Pfad und Markup aus derselben Quelle. Dann können beide nicht auseinanderlaufen. In WordPress übernimmt das ein SEO-Plugin. Prüfen Sie danach zwei Dinge:
- Pfad und Markup stehen im Quelltext der ausgelieferten Seite und entstehen nicht erst per JavaScript.
- Der Test für Rich Results und der Bericht in der Search Console melden keine Fehler; Google empfiehlt, den Bericht nach jeder Änderung an Vorlagen zu prüfen.
Prüfliste: Breadcrumbs in zehn Minuten testen
Mit dieser Liste prüfen Sie die Breadcrumb-Navigation Ihrer Website selbst. Jede Frage lässt sich mit Ja oder Nein beantworten:
- Öffnen Sie am Smartphone drei tiefe Seiten aus einem Suchergebnis: Erkennen Sie sofort, wo Sie sind?
- Passt der Pfad auf eine Zeile oder ist er sauber gekürzt?
- Treffen Sie jede Ebene mit dem Daumen, ohne daneben zu tippen?
- Ist die aktuelle Seite Text und kein Link?
- Bleiben die Trennzeichen beim Vorlesen stumm?
- Ist der Tastaturfokus auf jedem Link sichtbar und nie verdeckt?
- Stehen Pfad und Markup im Quelltext der Seite?
- Zeigt der Pfad die Struktur und nicht den Klickweg?
- Fehlt der Pfad in Bestell- und Formularabläufen?
- Stehen gesetzte Filter außerhalb des Pfads?
Sie möchten wissen, wie Ihre Navigation bei Nutzern, Screenreadern und Google ankommt? Ich prüfe das in einem UX-Check und auf Wunsch zusammen mit einer Prüfung der Barrierefreiheit.
Häufige Fragen zur Breadcrumb-Navigation
Sind Breadcrumbs ein Rankingfaktor?
Eine direkte Wirkung auf das Ranking hat Google nicht bestätigt. Google nutzt Breadcrumbs aber zum Crawlen und zeigt den Pfad im Desktop-Suchergebnis. Die sichtbaren Links stärken außerdem die interne Verlinkung zu übergeordneten Seiten.
Soll die aktuelle Seite im Breadcrumb verlinkt sein?
Nein. Setzen Sie die aktuelle Seite als Text mit aria-current="page" oder lassen Sie sie weg, wenn die Hauptüberschrift direkt folgt. Das Muster des W3C erlaubt zwar einen Link, die meisten Designsysteme verzichten aber darauf.
Zeigt Google Breadcrumbs noch im Suchergebnis?
Auf dem Desktop ja, auf dem Smartphone seit dem 23. Januar 2025 nicht mehr. Dort steht nur die Domain. Das Markup wird weiter unterstützt, und der Bericht in der Search Console bleibt verfügbar.
Brauche ich BreadcrumbList-Markup, wenn der Breadcrumb sichtbar ist?
Für die Anzeige des Pfads im Desktop-Suchergebnis ja. Für die Zitierung in KI-Antworten ist kein Nutzen belegt; dort zählt der sichtbare Pfad im ausgelieferten HTML.
Wie groß müssen Breadcrumb-Links auf dem Smartphone sein?
Mindestens 24 × 24 CSS-Pixel nach WCAG 2.2, Stufe AA. Apple empfiehlt 44 Punkt, Android 48 dp. Die Schrift darf klein bleiben, wenn die Fläche um den Link groß genug ist.
Wie heißt Breadcrumb auf Deutsch?
Brotkrümelnavigation oder Brotkrumennavigation, seltener Pfadnavigation. Der Name spielt auf die Brotkrumen an, mit denen Hänsel und Gretel ihren Weg markieren.
Fazit
Die Breadcrumb-Navigation ist kein Relikt, sondern ein kleines Werkzeug mit klarer Aufgabe: Sie beantwortet „Wo bin ich?“. Auf dem Smartphone zeigen Sie so viel Pfad, wie auf eine Zeile passt, und halten die Elternseite sichtbar. Im Code setzen Sie auf eine beschriftete Liste, stumme Trennzeichen und Tippflächen ab 24 Pixeln. Google liest den Pfad weiter, zeigt ihn aber nur noch am Desktop. Für KI-Antworten zählt, dass er als Text im HTML steht. Wenn Sie nur einen Schritt tun: Gehen Sie die Prüfliste oben an Ihrem eigenen Smartphone durch.