Breadcrumbs ​

Breadcrumbs zeigen Nutzenden, wo sie sich befinden und erlauben es, schnell eine oder mehrere hierarchische Ebenen zurück zu gehen.

Overview ​

Intro ​

Breadcrumbs sind eine platzsparende hierarchische Navigation, die Nutzenden hilft, die Hierarchie der Seiten zu verstehen und eine oder mehrere Ebenen zurück zu navigieren.

Breadcrumbs

Verwendung ​

👍 Do👎 Don't
...wenn es eine hierarchisch höhere Ebene gibt, die als Navigationsziel hinterlegt ist ...wenn eine hierarchische Navigation abgebildet sein soll, um das Bedürfnis der Nutzenden nach Hierarchie und Orientierung abzudecken... wenn es nur eine Ebenen von Inhalten gibt ... wenn eine pfadbasierte Navigation benötigt wird. Dafür "Zurück" Buttons des Browsers verwenden oder einen "Zurück" Button einbauen

Guidelines ​

Aufbau ​

Aufbau Breadcrumbs

1.Breadcrumb/Link: Verlinkt zur angezeigten Seite

2.Divider: Trennt die Breadcrumbs voneinander

Der Breadcrumb Link entspricht dem Seitentitel und der Überschrift, zu der verlinkt wird.

Anordnung ​

Die Breadcrumbs werden oben links im Inhaltsbereich platziert. Sie sind unterhalb des Global Headers und rechts neben der Application Bar. Sie werden oberhalb von Seitenüberschriften und dem Object Header verortet.

Breadcrumbs Platzierung

Varianten/Typen ​

Default Desktop: Aktuelle Seite gelistet ​

Die angezeigte Hierarchie enthält die Seite, auf der sich die Nutzenden gerade befinden als letztes Element. Dieser Breadcrumb ist jedoch deaktiviert und nicht anklickbar.

Desktop: Aktuelle Seite nicht gelistet ​

Die Breadcrumbs beinhalten nur die Hierarchie bis zu der Seite, auf der Nutzende sich aktuell befinden. Die aktuelle Seite wird nicht aufgelistet.

Mobile: Letzter Navigationspunkt ​

Es wird immer nur der letzte Navigationspunkt angezeigt.

Verwendung ​

Breadcrumbs stellen die hierarchischen Beziehungen der Seiten untereinander dar und werden daher als hierarchische Navigation benutzt. Sie dienen nicht zur pfadbasierten Navigation.

Wenn es Anwendungsfälle gibt, in denen Nutzende über eine Suche oder Crossverlinkung auf eine Seite gelangen, dann kann es zusätzlich zu den Breadcrumbs ein UI-Element geben, das die Zurücknavigation zu dieser Seite ermöglicht. Zum Beispiel einen Button mit dem Label "Zurück zu Suchergebnissen".

Verhalten ​

Grundsätzlich sollten alle Breadcrumbs aktiv sein und auf die jeweils zugehörige Seite verlinken. Ausgenommen ist nur der Breadcrumb der aktuellen Seite, sofern diese dargestellt wird (siehe Varianten oben). Nutzende können aktive Breadcrumbs anklicken, um zur entsprechenden Seite zu navigieren. Die Divider zwischen den Breadcrumbs sind keine interaktiven Elemente. Breadcrumbs werden stets in einer einzigen Zeile dargestellt und brechen nicht in eine zweite Zeile um.

Overflow/Responsive ​

Die Breadcrumbs passen sich responsiv an, damit sie auf verschiedenen Screen Größen eingesetzt werden können. Es werden Teile der Navigation in ein Hover-Menü ausgelagert, wenn es zu wenig Platz gibt. Der ausgeblendete Bereich wird durch „...“ gekennzeichnet.

Barrierefreiheit ​

Tastaturbedienung ​

Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") sind die Breadcrumbs fokussierbar. Einzelne Breadcrumbs lassen sich dann mit den Pfeiltasten ansteuern.

Ist ein Breadcrumb im Fokus, kann dieser mittels Wagenrückholtaste ("Return"), Eingabetaste ("Enter") und auch per Leerzeichentaste ("Space") ausgewählt werden.

Deaktivierte Breadcrumbs können nicht fokussiert werden.

Code Examples ​

Install ​

Maven ​

xml
<dependency>
    <groupId>com.vaadin.componentfactory</groupId>
    <artifactId>breadcrumb</artifactId>
</dependency>

Import ​

java
import com.vaadin.componentfactory.Breadcrumbs;
import com.vaadin.componentfactory.Breadcrumb;

Variants ​

Desktop ​

java
Breadcrumbs breadcrumbs = new Breadcrumbs(
    new Breadcrumb("Home", "#"),
    new Breadcrumb("Directory", "#"),
    new Breadcrumb("Current Page"));

Mobile ​

java
Breadcrumbs breadcrumbs = new Breadcrumbs(
    new Breadcrumb("Home", "#"),
    new Breadcrumb("Directory", "#"),
    new Breadcrumb("Current Page"));
breadcrumbs.setForceMobileMode(true);

Overflow ​

java
Breadcrumbs breadcrumbs = new Breadcrumbs(
    new Breadcrumb("Home", "#"),
    new Breadcrumb("Directory", "#", true),
    new Breadcrumb("Sub-Directory", "#", true),
    new Breadcrumb("Current Page"));