# 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.

## Overview

# Playground

Verwende `<TabNavigation />`, um eine horizontale Navigation aus
[Links](/04-components/navigation/link/overview) darzustellen. Enthaltene Links
werden automatisch im passenden Style formatiert. Markiere die aktuell aktive
Seite mit `aria-current="page"`.

```tsx
import {
  TabNavigation,
  Link,
  AlertIcon,
} from "@mittwald/flow-react-components";

<TabNavigation aria-label="Projekt-Navigation">
  <Link href="#">Apps</Link>
  <Link href="#" aria-current="page">
    Container
  </Link>
  <Link href="#">Domains</Link>
  <Link href="#">E-Mails</Link>
  <Link href="#">
    Datenbanken
    <AlertIcon status="warning" />
  </Link>
  <Link href="#">Backups</Link>
</TabNavigation>
```

---

# Responsives Overflow-Verhalten

Passen nicht alle Links in die verfügbare Breite, bleiben die vorderen Links
sichtbar und die übrigen werden ausgeblendet. Stattdessen erscheint rechts ein
**Weitere**-Button, der die ausgeblendeten Links in einem
[ContextMenu](/04-components/actions/context-menu/overview) öffnet. Befindet
sich die aktuell aktive Seite im ContextMenu, wird der Button wie ein aktiver
Link dargestellt.

```tsx
import {
  TabNavigation,
  Link,
  LayoutCard,
} from "@mittwald/flow-react-components";

<LayoutCard style={{ maxWidth: "450px" }}>
  <TabNavigation aria-label="Projekt-Navigation">
    <Link href="#">Dashboard</Link>
    <Link href="#">Domains</Link>
    <Link href="#">E-Mail</Link>
    <Link href="#">Datenbanken</Link>
    <Link href="#" aria-current="page">
      Einstellungen
    </Link>
  </TabNavigation>
</LayoutCard>
```

---

# Mit Status-Icons

Innerhalb der Links kann ein
[AlertIcon](/04-components/status/alert-icon/overview) verwendet werden, um auf
Zustände innerhalb eines Navigationsbereichs hinzuweisen.

```tsx
import {
  AlertIcon,
  Badge,
  TabNavigation,
  Link,
} from "@mittwald/flow-react-components";

<TabNavigation aria-label="Projekt-Navigation">
  <Link href="#" aria-current="page">
    Dashboard
  </Link>
  <Link href="#">
    Speicherplatz
    <AlertIcon status="danger" />
  </Link>
  <Link href="#">
    Backups
    <Badge color="violet">Neu</Badge>
  </Link>
</TabNavigation>
```

---

# Kombiniere mit ...

## LayoutCard

Platziere die TabNavigation in einer
[LayoutCard](/04-components/structure/layout-card/overview), um zwischen den
Unterseiten zu navigieren. Der Inhalt der aktiven Seite wird darunter in
derselben LayoutCard dargestellt.

```tsx
import {
  LayoutCard,
  TabNavigation,
  Link,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<LayoutCard>
  <TabNavigation aria-label="Projekt-Navigation">
    <Link href="#" aria-current="page">
      Apps
    </Link>
    <Link href="#">Container</Link>
    <Link href="#">Domains</Link>
    <Link href="#">E-Mails</Link>
    <Link href="#">Backups</Link>
  </TabNavigation>
  <Section>
    <Text>
      Der Inhalt der aktiven Seite wird unterhalb der
      TabNavigation in derselben LayoutCard dargestellt.
    </Text>
  </Section>
</LayoutCard>
```