# Tabs

Tabs strukturieren verwandte Inhalte und ermöglichen einen schnellen Zugriff auf unterschiedliche Ansichten.

## Guidelines

# Grundlagen

## Best Practices

Achte bei der Verwendung von Tabs darauf, dass ...

- innerhalb eines Tabs thematisch verwandter Content gruppiert wird.
- die Reihenfolge nach Wichtigkeit oder Häufigkeit der Nutzung erfolgt.
- jeder Tab eigenständig verständlich ist und eine kurze und deutliche
  Beschriftung hat.
- sie nicht zur Navigation eingesetzt werden – Tabs schalten ausschließlich
  Inhalte innerhalb derselben Seite um, ohne zu einer anderen Seite bzw. URL zu
  navigieren, und ersetzen keine Navigation.
- bei Statusanzeigen innerhalb eines Tabs – z. B. durch einen
  Danger-[Alert](/04-components/status/alert/overview) – der Tab selbst ein
  entsprechendes Status-Icon erhält, um die Aufmerksamkeit darauf zu lenken.

## Verwendung

Verwende Tabs, um komplexe Inhalte in kleinere, übersichtlichere Ansichten zu
gliedern.

## Tabs vs. TabNavigation

Flow bietet mit Tabs und der
[TabNavigation](/04-components/navigation/tab-navigation/overview) zwei ähnlich
aussehende Components, die sich aber in der Verwendung klar unterscheiden:

  

**ℹ️ Info**

Inhalte innerhalb derselben Seite umzuschalten, ohne zu navigieren.

  

**ℹ️ Info**

zwischen gleichrangigen Unterseiten zu navigieren.