HeaderNavigation

Playground

Verwende <HeaderNavigation />, um eine HeaderNavigation darzustellen. Enthaltene Buttons und Links werden automatisch im passenden Style formatiert.

import {
  Button,
  HeaderNavigation,
  IconSearch,
  Link,
} from "@mittwald/flow-react-components";

<HeaderNavigation aria-label="Header navigation">
  <Link href="#">Getting started</Link>
  <Link href="#" aria-current="page">
    Components
  </Link>
  <Button>
    <IconSearch />
  </Button>
</HeaderNavigation>

Mit ContextMenu

Avatare und Buttons können als Trigger für das ContextMenu verwendet werden.

Color

Light und Dark

Zusätzlich zu der Standard-Color, kann die HeaderNavigation in Light und Dark dargestellt werden. Beide Colors eigenen sich, wenn die Standardfarbe auf farbigen oder dekorativen Hintergründen nicht gut funktioniert.

Light: Verwende die Light-Color, bei dunklen Hintergründen mit einem HSL Lightness-Wert von weniger als 50.

Dark: Verwende die Dark-Color, bei hellen, farbigen Hintergründen mit einem HSL Lightness-Wert von größer als 50.