mittwald Flow Logo

Components

HeaderNavigation

Die HeaderNavigation ist eine horizontale Navigationskomponente, die als Navigationsleiste am oberen Rand einer Seite verwendet wird. Sie bietet Nutzenden Zugriff auf zentrale Bereiche einer Anwendung oder Website.GitHub

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 startet</Link>
  <Link href="#" aria-current="page">
    Komponenten
  </Link>
  <Button>
    <IconSearch />
  </Button>
</HeaderNavigation>

Mit ContextMenu

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

import {
  Avatar,
  Button,
  ContextMenu,
  ContextMenuTrigger,
  HeaderNavigation,
  IconLogout,
  IconNotification,
  IconSearch,
  IconSettings,
  IconSupport,
  Image,
  MenuItem,
  Text,
} from "@mittwald/flow-react-components";

<HeaderNavigation aria-label="Header navigation">
  <Button>
    <IconSearch />
  </Button>
  <Button>
    <IconSupport />
  </Button>
  <Button>
    <IconNotification />
  </Button>
  <ContextMenuTrigger>
    <Button>
      <Avatar>
        <Image
          alt="Gopher"
          src="https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544"
        />
      </Avatar>
    </Button>
    <ContextMenu>
      <MenuItem>
        <IconSettings />
        <Text>Profil</Text>
      </MenuItem>
      <MenuItem>
        <IconLogout />
        <Text>Logout</Text>
      </MenuItem>
    </ContextMenu>
  </ContextMenuTrigger>
</HeaderNavigation>

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.

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

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

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

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

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.

Overview