Breadcrumbs zeigen dem Nutzer seinen aktuellen Standort innerhalb der Hierarchie der Plattform an und bieten eine einfache Möglichkeit, zu übergeordneten Leveln zu gelangen. Diese Komponente fungiert als Sekundäre Navigation, damit sich die Nutzer beim Durcharbeiten strukturierter Lerninhalte besser zurechtfinden.
Sie sind besonders nützlich, wenn Nutzer über externe Links, die Suche oder Dashboard-Karten auf eine Seite gelangen – sie bieten schnellen Zugriff auf übergeordnete Level, die in der Hauptnavigation sonst nicht sichtbar sind.
Zweck
-
Zeige die Stelle der Seite innerhalb der strukturellen Hierarchie deutlich an
-
Schnellnavigation zu übergeordneten Leveln aktivieren
-
Aufrichtende Unterstützung, insbesondere bei der Landung tief im Inneren der Plattform
Struktur
Wir verwenden hierarchische Breadcrumbs damit die Nutzer stets wissen, welche Stelle sie im System einnehmen. Dieses einheitliche Schema fördert eine intuitive Navigation und hilft dabei, den Überblick zu behalten.
-
Die Struktur der Plattform widerspiegeln
-
In allen Kontexten einheitlich und vorhersehbar
Beispiele:
-
Katalog / Lernpfad / Kurs / Lerninhalte -
Portal / Aktuelles / News-Beitrag
Zurück-Button vs. Breadcrumbs
Wenn Nutzer von außerhalb des hierarchischen Pfades auf eine Seite gelangen (z. B. über die Suche, per E-Mail oder über das Portal), wird ein Zurück-Button wird anstelle der Breadcrumbs angezeigt. Diese historische Zurück-Funktion bringt die Nutzer in ihren vorherigen Kontext zurück, wobei Filter, Scrollposition und andere Einstellungen beibehalten werden.
-
Navigationspfad = Navigationspfad durch die Struktur der Plattform
-
Zurück-Button = Mit einem Klick zur zuvor besuchten Seite zurückkehren, unabhängig von der Struktur
Verhalten
Breadcrumbs passen sich dynamisch an die Verfügbarkeit des Platzes an:
-
Sofern genügend Platz vorhanden ist, werden alle Breadcrumb-Elemente angezeigt
-
Wenn der Platz begrenzt ist, werden die mittleren Elemente zu drei Punkten zusammengefasst
-
Bei manchen Breadcrumb-Layouts werden Icons weggelassen oder andere Trennzeichen verwendet
---
Die Breadcrumb-Navigation ist bewusst so gestaltet, dass sie ein Gleichgewicht zwischen Übersichtlichkeit und Flexibilität schafft – sie hilft den Nutzern bei der Orientierung und sorgt gleichzeitig für eine einheitliche Navigation über alle Geräte und Anwendungsfälle hinweg.