TabNavigation

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

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‍ 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‍ ö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.

Der Inhalt der aktiven Seite wird unterhalb der TabNavigation in derselben LayoutCard dargestellt.

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.

Components

Integrations