Die Tab-Komponente ermöglicht es dir, mehrere Inhaltsbereiche platzsparend auf einer Seite darzustellen. Inhalte werden in einzelne Tabs aufgeteilt, zwischen denen Nutzer:innen wechseln können, ohne die Seite zu verlassen.
Sie eignet sich besonders für:
strukturierte Informationsbereiche
Produkt- oder Leistungsübersichten
FAQ-ähnliche Inhalte
Inhalte mit klar getrennten Themenblöcken
Aufbau der Komponente
Beim Öffnen der Tab-Komponente kannst du:
eine Headline hinzufügen oder ausblenden
eine Subheadline hinzufügen oder ausblenden
die Größe der Tab-Labels festlegen (drei Größen stehen zur Auswahl)
Die Wahl der Größe hängt davon ab, wie viele Tabs verwendet werden und wie präsent diese sein sollen.
Tabs & Inhalte
Jeder Tab wird einzeln angelegt. Innerhalb eines Tabs kannst du:
das Tab-Label definieren
über das Plus-Icon weitere Komponenten einfügen
Nicht alle Komponenten stehen innerhalb eines Tabs zur Verfügung, da sich nicht jede für diese Struktur eignet. Die verfügbare Auswahl ist jedoch ausreichend für typische Inhaltsbereiche.
Die Anzahl der Tabs ist nicht begrenzt. Dennoch empfiehlt es sich, die Struktur übersichtlich zu halten.
Einstellungen pro Tab
Über das Drei-Punkte-Menü eines Tabs kannst du:
typischen Einstellungen vornehmen, wie den Tab kopieren, den Tab ein- oder ausblenden und einen Deep Link (Anchor) vergeben
Deep Links sind besonders sinnvoll, um direkt auf bestimmte Tabs zu verweisen und die Navigation gezielt zu steuern.
Farbschema
Für die Tab-Komponente kann ein eigenes Farbschema festgelegt werden.
Zusätzlich kann innerhalb der einzelnen Tabs für eingefügte Komponenten ein separates Farbschema vergeben werden.
Wird kein eigenes Farbschema definiert, übernehmen die Inhalte automatisch das Farbschema der Tab-Komponente.
Tipps & Tricks
Tabs helfen, lange Inhalte kompakt darzustellen.
Zu viele Tabs können die Übersicht erschweren.
Bei komplexen Strukturen sollte die Navigation klar durchdacht sein.
Achte darauf, dass Nutzer:innen nicht zu viele Klickebenen durchlaufen müssen.