# TabNavigation

Die TabNavigation ist eine horizontale Navigationskomponente aus Links. Passen nicht alle Links in die verfügbare Breite, werden überzählige Links in einem ContextMenu zusammengefasst.

## Guidelines

# Grundlagen

## Best practices

Achte bei der Verwendung einer TabNavigation darauf, dass ...

- die Navigationspunkte klar beschriftet und in sinnvoller Reihenfolge
  angeordnet sind — die vorderen Links bleiben bei wenig Platz am längsten
  sichtbar.
- die Navigation nicht überladen wird und nur relevante Bereiche enthält.

## Verwendung

Verwende eine TabNavigation, um ...

- zwischen gleichrangigen Unterseiten zu navigieren.
- eine platzsparende, responsive Navigation bereitzustellen, die bei wenig Platz
  automatisch in ein ContextMenu zusammenklappt.

## Tabs vs. TabNavigation

Flow bietet mit der TabNavigation und den
[Tabs](/04-components/structure/tabs/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.