Tabs – Tab-Navigation und -Inhaltsstruktur im UI-Design

Tabs sind eine UI-Navigationskomponente, die gleichrangige Inhaltsbereiche in einem gemeinsamen Ansichtsbereich organisiert und dem Nutzer ermöglicht, zwischen diesen durch Klick oder Touch zu wechseln, ohne die Seite zu verlassen.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UI-Komponenten · Niveau: Einsteiger Synonyme / Auch bekannt als: Tab Bar, Tab Panel, Register, Reiter, Tab Navigation

Was sind Tabs?

Tabs strukturieren Inhalte, die thematisch zusammengehören, sich aber gegenseitig ausschließen – zu einem Zeitpunkt ist immer nur ein Tab-Inhalt sichtbar. Sie eignen sich hervorragend, wenn verschiedene Perspektiven auf denselben Kontext gezeigt werden sollen (z. B. „Übersicht", „Details", „Bewertungen" auf einer Produktseite). Tabs sind kein Navigations-Ersatz für unterschiedliche Seiten, sondern ein Organisationsmittel innerhalb einer Seite oder eines Screens.

Erklärung

Varianten

Fixed/Primary Tabs: Gleich breite Tabs, füllen die gesamte verfügbare Breite. Maximal 3–5 Tabs empfohlen. Typisch in Mobile-Apps (z. B. Material Design Bottom Navigation).

Scrollable/Secondary Tabs: Tabs in natürlicher Breite, bei Overflow horizontal scrollbar. Für mehr als 5 Tabs oder unterschiedlich lange Labels. Nutzer kann swipen/scrollen.

Top Tabs: Klassische Web-Tabs oberhalb des Inhaltsbereichs. Standard bei Desktop-Interfaces.

Bottom Tabs / Tab Bar: Navigation am unteren Bildschirmrand, typisch für Mobile-Apps (iOS Tab Bar, Android Bottom Navigation). Daumen-erreichbar.

Icon Tabs: Tabs nur mit Icons (ohne Text-Labels) – kompakt, aber schlechtere Erkennbarkeit. Nur für sehr bekannte und universell verständliche Icons.

Segmented Control: iOS-Variante: Kompakte Tab-Gruppe als pill-förmiges Element, typisch für 2–5 gleichwertige Ansichts-Optionen. Enger Verwandter der Tabs.

Anatomie

• Tab List / Tab Bar: Container mit allen Tab-Elementen
• Tab Item: Einzelner Tab mit Label (Text und/oder Icon), Active Indicator (Unterstrich oder hervorgehobener Hintergrund), Hover-State
• Active Indicator: Visuelles Signal des aktiven Tabs (meist Linie unten oder Hintergrundfarbe)
• Tab Panel: Der Inhaltsbereich, der zum aktiven Tab gehört
• Divider: Trennlinie zwischen Tab Bar und Panel

States der Tab Items

Accessibility (WCAG 2.1)

Das ARIA Tabs-Pattern ist eines der am häufigsten falsch implementierten Muster:

• Tab List: role="tablist", aria-label mit Beschreibung der Gruppe
• Einzelne Tabs: role="tab", aria-selected="true/false", aria-controls="panel-id"
• Tab Panels: role="tabpanel", id passend zum aria-controls, aria-labelledby zeigt auf Tab
• Tastaturnavigation: Tab aktiviert den Tab-Focus; ←/→ navigiert zwischen Tabs (Pfeiltasten, nicht Tab-Taste!); Enter/Space aktiviert den Tab; Home/End zum ersten/letzten Tab
• Inaktive Tab-Panels: hidden Attribut oder display: none – sonst liest Screenreader alle Panels
• Fokus-Steuerung: Beim Pfeiltasten-Navigieren zwischen Tabs wandert der Fokus mit

Beispiele

1. GitHub – Repository-Seite: Tabs für „Code", „Issues", „Pull Requests", „Actions", „Projects", „Wiki", „Security", „Insights", „Settings". Horizontale scrollbare Tabs mit Icon + Text, aktiver Tab mit Unterstrich-Indicator und Counter-Badge bei Issues/PRs.
2. Google Analytics: Dashboard mit Top Tabs für verschiedene Report-Bereiche. Jeder Tab lädt eigenständigen Inhalt. Korrekte URL-Aktualisierung bei Tab-Wechsel – wichtig für Deep-Linking und Browser-History.
3. Mobile vs. Desktop: iOS App-Navigation nutzt fast ausschließlich Bottom Tabs (Tab Bar) statt Top Tabs, da der Daumen den unteren Bildschirmbereich besser erreicht. Android nutzt ebenfalls Bottom Navigation oder Top Scrollable Tabs je nach Kontext.
4. Accessibility Best Practice: Die BBC-Website implementiert Tabs mit korrektem ARIA-Pattern, inklusive Pfeiltatsten-Navigation zwischen Tabs und aria-selected – vollständig WCAG 2.1 AA konform.
5. Häufiger Fehler: Tabs für Inhalte verwenden, die nicht gleichrangig sind – z. B. einen Schritt-für-Schritt-Prozess als Tabs darstellen. Für sequentielle Inhalte ist ein Stepper/Wizard besser. Auch falsch: Mehr als 7 Tabs in einer Reihe ohne Scrolling – Nutzer verlieren den Überblick.

In der Praxis

Figma: Tab Bar als Komponente mit Tab-Item-Unterkompnente (Variants: Default/Active/Hover/Disabled). Auto Layout für die Tab Bar. Bei Active-Tab: den Unterstrich-Indicator als Pseudo-Element oder dediziertes Layer. Content Panels als Frames, die per Prototype-Interaktion ein-/ausgeblendet werden.

HTML/CSS-Grundstruktur: ```html <div class="tabs"> <ul role="tablist" aria-label="Produkt-Informationen"> <li role="presentation"> <button role="tab" id="tab-overview" aria-selected="true" aria-controls="panel-overview" tabindex="0" >Übersicht</button> </li> <li role="presentation"> <button role="tab" id="tab-details" aria-selected="false" aria-controls="panel-details" tabindex="-1" >Details</button> </li> </ul>

<div role="tabpanel" id="panel-overview" aria-labelledby="tab-overview"> <!-- Übersicht-Inhalt --> </div> <div role="tabpanel" id="panel-details" aria-labelledby="tab-details" hidden> <!-- Details-Inhalt --> </div> </div> ```

Vergleich & Abgrenzung

Tabs vs. Accordion: Tabs für gleichrangige Inhalte, die ein Nutzer schnell vergleichen möchte (schnelles Umschalten). Accordion wenn mehrere Inhalte gleichzeitig geöffnet sein können oder der Platzbedarf auf einer langen Seite reduziert werden soll.

Häufige Fragen (FAQ)

Soll ein Tab-Wechsel die URL im Browser ändern? Ja, in den meisten Fällen. URL-Updates bei Tab-Wechseln ermöglichen Deep-Linking (direkt zu einem Tab verlinken), funktionierende Browser-Navigation (Vor/Zurück-Button) und das Teilen von Links. Ausnahme: Tabs, die nur visuelle Darstellungs-Varianten ohne eigene Informations-Tiefe anzeigen (z. B. „Rasteransicht" / „Listenansicht").

Warum navigiert man mit Pfeiltasten statt Tab-Taste zwischen Tabs? Das ARIA Authoring Practices Guide definiert, dass Tab-Items als Gruppe mit Pfeiltasten navigiert werden (Roving-Tabindex-Pattern). Die Tab-Taste springt zum nächsten interaktiven Element außerhalb der Tab-Gruppe. Nur der aktive Tab hat tabindex="0", alle anderen tabindex="-1". Dieses Muster verhindert, dass Tastaturnutzer durch alle Tabs tabben müssen, bevor sie zum Inhalt gelangen.

Verwandte Einträge

• Accordion
• Navigation Bar
• Sidebar Navigation
• Breadcrumb

Weiterführend

• Nielsen Norman Group – „Tabs vs. Accordions": nngroup.com
• Material Design 3 – Tabs: m3.material.io/components/tabs
• Apple Human Interface Guidelines – Tab Bars: developer.apple.com/design/human-interface-guidelines/tab-bars
• WAI-ARIA Authoring Practices – Tabs Pattern: w3.org/WAI/ARIA/apg/patterns/tabs