# 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.

## Overview

# Playground

Verwende `<HeaderNavigation />`, um eine HeaderNavigation darzustellen.
Enthaltene [Buttons](/04-components/actions/button/overview) und
[Links](/04-components/navigation/link/overview) werden automatisch im passenden
Style formatiert.

```tsx
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">
    Komponenten
  </Link>
  <Button>
    <IconSearch />
  </Button>
</HeaderNavigation>
```

---

# Mit ContextMenu

[Avatare](/04-components/content/avatar/overview) und
[Buttons](/04-components/actions/button/overview) können als Trigger für das
[ContextMenu](/04-components/actions/context-menu/overview) verwendet werden.

```tsx
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.

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

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

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

<HeaderNavigation
  aria-label="Header navigation"
  color="dark"
>
  <Link href="#">Getting started</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.