TabNavigation

Neu

Playground

Verwende <TabNavigation />, um eine horizontale Navigation aus Links darzustellen. Enthaltene Links werden automatisch im passenden Style formatiert. Markiere die aktuell aktive Seite mit aria-current="page".

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 öffnet. Befindet sich die aktuell aktive Seite im ContextMenu, wird der Button wie ein aktiver Link dargestellt.

Mit Status-Icons

Innerhalb der Links kann ein AlertIcon verwendet werden, um auf Zustände innerhalb eines Navigationsbereichs hinzuweisen.

Kombiniere mit ...

LayoutCard

Platziere die TabNavigation in einer LayoutCard, um zwischen den Unterseiten zu navigieren. Der Inhalt der aktiven Seite wird darunter in derselben LayoutCard dargestellt.