Darstellung

• Es wird immer nur der Inhalt eines Reiters angezeigt.
• Reiter werden linksbündig zum Seitenlayout gesetzt. Eine Ausdehnung über die gesamte Layoutbreite erlauben wir nur auf mobilen Geräten und im App Layout.
• Reiter stehen immer direkt über dem zugehörigen Inhalt.
• Reiter müssen manuell angesteuert werden.

Verhalten

Reiter haben folgende Zustände: Aktiv, Default, onHover. Der aktive Reiter ist invertiert Schwarz markiert und enthält keine Interaktion. Der Content oberhalb der Subnavigation darf sich durch das Betätigen der Subnavigation nicht ändern.

Responsives Verhalten

Wenn die Reiterelemente über die Breite des Layouts hinausgehen (Mobile), werden sie horizontal scrollbar. Um die Nutzenden auf das Scrolling aufmerksam zu machen, zeigen wir Schatten an.

Verwendung

Ein Reiter bündelt umfangreiche Inhalte und stellt sie als einzeln ansteuerbare Gruppe dar. Reiter erlauben es Nutzenden, schnell zwischen Themen hin und her zu navigieren.

Im Inhalt

• Soll der Inhalt in eine für die Nutzenden überschaubare Anzahl Themen aufgeteilt werden, kann ein Reiter zur Navigation eingesetzt werden.
• Ein Reiter wird als Inhalts-Navigation verwendet, wenn innerhalb der gleichen Seite zwischen verschiedenen Ansichten gewechselt werden soll.
• Der Titel beschreibt eindeutig den zu erwartenden Inhalt und ist kurz gehalten (ein Wort).
• Es wird empfohlen nicht mehr als 5 Reiter zu nutzen (max. 7)
• Beispiel für so einen Einsatz ist die Servicebox, bei der zwischen den Möglichkeiten Online, per Post, ... gewechselt werden kann, um einen Service zu nutzen.

Als Subnavigation für Applikationen

• Die Reiter als Subnavigation sind in der Hierarchie der Hauptnavigation unterstellt.
• Die Subnavigation ermöglicht das Navigieren innerhalb von Geschwisterseiten, die der zuvor gewählten Hauptrubrik angehörig sind.
• Der Inhalt oberhalb einer Subnavigation bleibt für alle Subnavigationsseiten gleich, sie steuert nur den Content unterhalb.
• Wir empfehlen, nicht mehr als 5 Reiter zu nutzen (maximal 7).