# TabNavigation

Die TabNavigation ermöglicht die Navigation zwischen verschiedenen Seiten innerhalb eines zusammengehörigen Bereichs.

```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>
```

---

# Best Practices

- Benenne die Seiten kurz, prägnant und verständlich.
- Ordne die Seiten nach ihrer Wichtigkeit. Bei wenig Platz bleiben die vorderen
  Seiten am längsten sichtbar.
- Halte die Navigation schlank und beschränke sie auf relevante Bereiche.

## Tabs vs. TabNavigation

Flow bietet mit der TabNavigation und den [Tabs](https://flow.mittwald.de/04-components/structure/tabs)
zwei ähnlich aussehende Components, die sich aber in der Verwendung klar
unterscheiden:

**Verwende Tabs, um ...**

Inhalte innerhalb derselben Seite umzuschalten, ohne zu navigieren.

**Verwende eine TabNavigation, um ...**

zwischen gleichrangigen Unterseiten zu navigieren.

---

# 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](https://flow.mittwald.de/04-components/actions/context-menu) ö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](https://flow.mittwald.de/04-components/status/alert-icon)
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](https://flow.mittwald.de/04-components/structure/layout-card), 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>
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. |

### Accessibility

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `aria-describedby` | `string` | - | Identifies the element (or elements) that describes the object. @see aria-labelledby |
| `aria-hidden` | `Booleanish` | - | Indicates whether the element is exposed to an accessibility API. @see aria-disabled. |
| `aria-label` | `string` | - | Defines a string value that labels the current element. @see aria-labelledby. |
| `aria-labelledby` | `string` | - | Identifies the element (or elements) that labels the current element. @see aria-describedby. |