HorizontalNavigation

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

Playground

Verwende <HorizontalNavigation />, 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 {
  HorizontalNavigation,
  Link,
  AlertIcon,
} from "@mittwald/flow-react-components";

<HorizontalNavigation 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>
</HorizontalNavigation>

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 können Status-Icons wie das AlertIcon oder die AlertBadge verwendet werden, um auf Zustände innerhalb eines Navigationsbereichs hinzuweisen. Sie werden auch in den Einträgen des ContextMenus dargestellt.

Auf dieser Seite