Breadcrumbs (Navigationspfad)

Breadcrumbs zeigen Besuchern den Pfad, den sie auf deiner Website zurückgelegt haben, und erleichtern die Navigation zu übergeordneten Seiten.

Was sind Breadcrumbs?

Breadcrumbs sind eine sekundäre Navigation, die den hierarchischen Pfad von der Startseite zur aktuellen Seite anzeigt. Sie werden als Liste von Links dargestellt, die durch Trennzeichen (z.B. >, →) getrennt sind.

Standardwerte bei Neuinstallation

Der Hauptschalter ist an, aber Breadcrumbs erscheinen im Frontend nur nach Integration per Shortcode [wcag_breadcrumbs] oder PHP-Funktion wcag_breadcrumbs().

Sinn und Einsatzmöglichkeiten

• Für alle Besucher: Klare Orientierung innerhalb der Seitenstruktur
• Für Screenreader-Nutzer: Semantisch korrekt strukturiert mit ARIA-Attributen und Schema.org-Markup
• Für SEO: Verbessert die Suchmaschinenoptimierung durch strukturierte Daten
• WCAG-Konformität: Erfüllt WCAG 2.4.5 (Multiple Ways), 2.4.8 (Location) und 3.2.3 (Consistent Navigation)
• UX-Verbesserung: Reduziert die Anzahl der Klicks zurück zur Startseite

Relevante WCAG-Kriterien:

• 2.4.5 Mehrere Wege: Bietet eine zweite Möglichkeit, sich auf der Webseite zurechtzufinden.
• 2.4.8 Standort: Zeigt dem Nutzer klar an, wo er sich in der Seitenstruktur befindet.
• 3.2.3 Konsistente Navigation: Stellt eine konsistente Navigationsstruktur über mehrere Seiten hinweg bereit.

Integration

Breadcrumbs können auf zwei Arten eingefügt werden:

Option 1: PHP-Funktion (für Theme-Integration)

<?php
if ( function_exists( 'wcag_breadcrumbs' ) ) {
wcag_breadcrumbs();
}
?>

Option 2: Shortcode (für Page Builder)

[wcag_breadcrumbs]

Konfigurationsmöglichkeiten

Allgemeine Einstellungen:

• Aktivieren: Breadcrumbs global ein- oder ausschalten
• ARIA-Label: Wichtiges Label für Screenreader (Standard: „Navigation path“)
• CSS-Klasse: Eigene CSS-Klasse für das <nav>-Element (Standard: wcag-breadcrumbs)
• Einführungstext: Text vor den Breadcrumbs (z.B. „Du bist hier:“)
• Einführungstext oberhalb: Text auf eigener Zeile oder inline
• Startseiten-Eintrag: wahlweise nur als Text, nur mit einem von vier mitgelieferten Lucide-Icons (Haus, Haus mit Herz, Bürogebäude oder offene Tür) oder als Icon mit sichtbarem Text
• Startseiten-Bezeichnung: sichtbarer Linktext oder zugänglicher Name des gewählten Icons (Standard: „Home“). Bei der kombinierten Ausgabe steht das dekorative Icon innerhalb desselben Startseiten-Links vor dem Text und übernimmt auf Desktop beziehungsweise Mobilgeräten den jeweiligen Abstand des Trennzeichens.
• Darstellung der aktuellen Seite: als unverlinkten oder verlinkten Text anzeigen
• Mobile Breakpoint: Bildschirmbreite, ab der mobile Styles gelten (Standard: 500px)

Trennzeichen:

• Trennzeichentyp (Desktop und Mobile): Wähle unabhängig zwischen einem Zeichen und einem Lucide-Icon.
• Zeichen: Verwende weiterhin eines der vorhandenen Symbole (z.B. >, →, ⤏, /, |, ⋮ oder ⋯).
• Lucide-Icon: Wähle Chevron, Doppel-Chevron, Pfeil, Schrägstrich, horizontale Linie, Kreis oder Raute.
• Icongröße: Stelle die Größe für Desktop und Mobile unabhängig zwischen 8 und 48 Pixeln ein.
• Mobile Icon-Drehung: Richte das gewählte Icon mit 0°, 90°, 180° oder 270° aus. Standardmäßig sind 0° eingestellt. Bei rechts-nach-links geschriebenen Desktop-Inhalten werden Richtungsicons gespiegelt.
• Trennzeichen-Abstand (Desktop): CSS-Margin für das Trennzeichen (z.B. 0px 7px 0px 5px)
• Trennzeichen-Abstand (Mobile): CSS-Margin für mobile Geräte (z.B. 0px 5px 0px 3px)
• Farbe des Trennzeichens/Icons: RGBA-Farbe für das gewählte Zeichen oder Lucide-Icon

Styling:

• Breadcrumb-Schriftgröße für Desktop und Mobilgeräte: Jeweils unabhängig als Zahlenwert mit rem, em, px oder % einstellbar (Standard: 1rem). Beim Wechsel der Einheit wird der Wert transparent auf Basis von 16px umgerechnet; em und % können abhängig vom Kontext des Themes sichtbar abweichen. rem wird empfohlen, weil es sich an der Grundschriftgröße der Website orientiert. Erweiterte CSS-Werte wie clamp() können weiterhin direkt eingegeben werden.
• Zeilenhöhe: CSS-Line-Height (Standard: 1.5)
• Innenabstand der Listeneinträge: gemeinsamer CSS-Innenabstand für alle <li>-Elemente auf Desktop und Mobilgeräten
• Innenabstand der Links (px): gemeinsamer Innenabstand der Links auf Desktop und Mobilgeräten in Pixeln (vergrößert die Klickfläche; beim ersten mobilen Eintrag wird links kein zusätzlicher Abstand ausgegeben)
• Link-Farbe: RGBA-Farbe für alle klickbaren Einträge
• Link-Farbe bei Hover: RGBA-Farbe beim Überfahren mit der Maus
• Letzter Eintrag Farbe: RGBA-Farbe für den letzten Eintrag (wenn nicht verlinkt)
• Text-Decoration: Unterstreichung, Überstreichung, Durchstreichung oder keine
• Text-Decoration bei Hover: Text-Decoration beim Überfahren mit der Maus

Ausrichtung:

• Ausrichtung (Desktop): Links, zentriert oder rechts
• Ausrichtung (Mobile): Links, zentriert oder rechts für schmale Bildschirme
• Bei der gestapelten mobilen Ausgabe bleiben Trennzeichen und zugehöriger Text auch bei zentrierter oder rechter Ausrichtung direkt zusammen. Icons sind stets vertikal zur Textzeile zentriert. Bei zentrierter Ausrichtung liegt die Textmitte aller Ebenen unabhängig von Icongröße und Abstand auf derselben Achse wie der Startseiten-Eintrag.

Live-Vorschau

Die Einstellungen gliedern Inhalt und Verhalten, Live-Vorschau, Darstellung, responsives Layout sowie technische Optionen in klar getrennte Karten ohne Schrittnummern. Mobile und erweiterte Layoutoptionen sind ohne zusätzliche Aufklappebene in der Karte „Responsives Layout“ direkt zugänglich.

Die dauerhaft sichtbare Live-Vorschau:

• Automatisch aktualisiert wird, wenn du Einstellungen änderst
• lässt dich direkt zwischen Desktop- und Mobile-Ansicht wechseln
• simuliert Standard-, Hover- und Tastaturfokus-Zustand
• zeigt das generierte HTML bei Bedarf in einem aufklappbaren Bereich
• nutzt auf Desktop und Mobil die volle Breite einer eigenen Vorschaukarte

Anwendungsbeispiele

Beispiel 1: Standard-Konfiguration

Aktiviere Breadcrumbs mit Standard-Einstellungen. Verwende das ⤏-Symbol als Trennzeichen, linksbündige Ausrichtung und Standard-Farben. Füge sie im Header deines Themes ein.

Beispiel 2: Minimalistisches Design

Verwende ein einfaches >-Symbol als Trennzeichen, kleine Schriftgröße, dezente Farben. Zeige den Einführungstext inline an. Ziel: Unaufdringlich, aber funktional.

Beispiel 3: Auffälliges Design

Verwende ein auffälliges Trennzeichen (→), größere Schrift, kontrastreiche Farben. Zeige den Einführungstext oberhalb an. Ziel: Maximale Sichtbarkeit.

Beispiel 4: Mobile-optimiert

Verwende ein kompaktes Trennzeichen für Mobile (⋮), reduzierte Abstände, zentrierte Ausrichtung. Ziel: Optimale Darstellung auf kleinen Bildschirmen.

Tipps

• Platziere Breadcrumbs konsistent auf allen Seiten (z.B. immer unter dem Header)
• Verwende die Live-Vorschau, um das Styling zu optimieren
• Teste die Breadcrumbs auf verschiedenen Bildschirmgrößen
• Stelle sicher, dass die Link-Farben ausreichend Kontrast haben (WCAG 1.4.3)
• Prüfe vergrößerten Text bis 200 Prozent; lange Bezeichnungen werden umgebrochen und nicht mit Auslassungspunkten abgeschnitten.
• Verwende aussagekräftige Trennzeichen, die klar als Trennung erkennbar sind
• Die CSS-Klasse ermöglicht dir, das Styling in deinem Theme anzupassen
• Für bessere SEO: Die Breadcrumbs enthalten automatisch Schema.org-Markup
• Der letzte Eintrag sollte normalerweise nicht verlinkt sein (zeigt die aktuelle Seite)
• Teste die Breadcrumbs mit Screenreadern, um sicherzustellen, dass sie korrekt vorgelesen werden

Technische Details

• Breadcrumbs werden semantisch korrekt als <nav>-Element mit <ol>-Liste implementiert
• Jeder Eintrag enthält Schema.org-Markup (BreadcrumbList, ListItem)
• ARIA-Attribute werden automatisch hinzugefügt
• Der aktuelle Eintrag hat aria-current=“page“
• Das Styling wird inline per CSS generiert, kann aber durch Theme-CSS überschrieben werden
• Die Breadcrumbs funktionieren auch ohne JavaScript

Verfügbar für: Alle Pläne Free