Navigation

Weiterleitung

Sie werden in Sekunden weitergeleitet.

Falls keine Weiterleitung erfolgt, klicken Sie auf den Link:

Es ist etwas schief gelaufen.

Upps - das Senden Deiner Anfrage ist fehlgeschlagen. Du kannst uns aber immer via E-Mail erreichen.

Navigation

Eine Navigation bietet eine dauerhafte Möglichkeit, zwischen den wichtigsten Zielen in einer App oder Seite zu wechseln.

Component--Navigation--Navigation--Playground

Variant

Horizontal

Die horizontale Variante der Navigation besteht aus Auto Width Navigation Items und wird im aktiven Zustand mit dem roten Puls unterlegt.

Vertical Left

Die Vertical Left Variante der Navigation wird im Drawer left eingesetzt. Der Puls ist vertikal rechts neben dem Full Width Navigation Item platziert und somit dem Content zugewandt.

Vertical Right

Die Vertical Right Variante der Navigation wird im Drawer right eingesetzt. Der Puls ist vertikal links neben dem Full Width Navigation Item platziert und somit dem Content zugewandt.

Navigation--Variants

Behavior

Full Width

Die vertikalen Varianten der Navigation haben eine definierte Breite und bestehen aus Full Width Navigation Items.

Auto Width

Die horizontale Variante der Navigation besteht aus Auto Width Navigation Items.

Navigation--Behavior

Desktop

Main Navigation

Pattern--Navigation-(Alpha)--Main-Navigation--Desktop

Main Navigation - Level 1 (hover)

Pattern--Navigation-(Alpha)--Main-Navigation--Desktop--Level-1-Hover

Main Navigation - Level 1 (click)

Pattern--Navigation-(Alpha)--Main-Navigation--Desktop--Level-1-Click

Main Navigation - Level 2 (hover)

Pattern--Navigation-(Alpha)--Main-Navigation--Desktop--Level-2-Hover

Main Navigation - Level 3 (hover)

Pattern--Navigation-(Alpha)--Main-Navigation--Desktop--Level-3-Hover

Main Navigation - Level 1 (active)

Pattern--Navigation-(Alpha)--Main-Navigation--Desktop--Level-1-Active

Mobile

Main Navigation

Pattern--Navigation-(Alpha)--Main-Navigation--Mobile

Main Navigation - Burger Menu (tap)

Pattern--Navigation-(Alpha)--Main-Navigation--Mobile--Burger-Menu-Tap

Main Navigation - Level 1

Pattern--Navigation-(Alpha)--Main-Navigation--Mobile--Level-1

Main Navigation - Level 1 (tap)

Pattern--Navigation-(Alpha)--Main-Navigation--Mobile--Level-1-Tap

Main Navigation - Level 2

Pattern--Navigation-(Alpha)--Main-Navigation--Mobile--Level-2

Main Navigation - Level 2 (tap)

Pattern--Navigation-(Alpha)--Main-Navigation--Mobile--Level-2-Tap

Main Navigation - Level 3

Pattern--Navigation-(Alpha)--Main-Navigation--Mobile--Level-3

Main Navigation - Level 3 (tap)

Pattern--Navigation-(Alpha)--Main-Navigation--Mobile--Level-3-Tap

Du hast Fragen oder Input? 

Wir haben alles dafür gegeben, dass unser Design System mit möglichst wenigen Regeln auskommt. So wird es einfach in der Anwendung, führt zu konsistenten Ergebnissen und stärkt die Marke Deutsche Bahn! Solltest du dir jedoch unsicher sein, Fragen oder einfach nur eine gute Verbesserungsidee haben, so sind wir gerne für dich da!

E-Mail schreiben Feedback in Github