HeaderNavigation

Die HeaderNavigation ist eine horizontale Navigationsleiste am Seitenanfang.

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>

Best Practices

Beschrifte die Navigationspunkte klar und ordne sie sinnvoll an.
Nutze für Icons‍ gängige Symbole mit eindeutiger Funktion.
Halte die Navigation schlank und beschränke sie auf relevante Elemente.

Color

Zusätzlich zur Standard-Color kann die HeaderNavigation in Light und Dark dargestellt werden, um auf farbigen oder dekorativen Hintergründen ausreichend Kontrast zu erreichen. Mehr zur richtigen Verwendung von Light und Dark findest du in den Foundations unter Color‍.

Kombiniere mit …

ContextMenu

Nutze einen Button‍ als Trigger für ein ContextMenu‍, um zum Beispiel ein Profil-Menü zu öffnen. Der Button kann dabei einen Avatar‍ enthalten.

Properties

Property	Type	Default	Description
`color`	`"default" \| "dark" \| "light" \| "dark-static" \| "light-static"`	"default"	The color of the header navigation.

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