# HeaderNavigation

Die HeaderNavigation ist eine horizontale Navigationsleiste am Seitenanfang.

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

---

# Best Practices

- Beschrifte die Navigationspunkte klar und ordne sie sinnvoll an.
- Nutze für [Icons](https://flow.mittwald.de/04-components/content/icon) 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](https://flow.mittwald.de/02-foundations/01-design/02-colors#light-und-dark-color).

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

---

# Kombiniere mit …

## ContextMenu

Nutze einen [Button](https://flow.mittwald.de/04-components/actions/button) als Trigger für ein
[ContextMenu](https://flow.mittwald.de/04-components/actions/context-menu), um zum Beispiel ein
Profil-Menü zu öffnen. Der Button kann dabei einen
[Avatar](https://flow.mittwald.de/04-components/content/avatar) enthalten.

```tsx
import {
  Avatar,
  Button,
  ContextMenu,
  ContextMenuTrigger,
  HeaderNavigation,
  Heading,
  IconCamera,
  IconLogout,
  IconNotification,
  IconSearch,
  IconSettings,
  IconSupport,
  Image,
  Initials,
  MenuItem,
  Section,
  Separator,
  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>
      <Section>
        <MenuItem>
          <Avatar>
            <Initials>Max Mustermann</Initials>
          </Avatar>
          <IconCamera />
        </MenuItem>
        <Heading>Max Mustermann</Heading>
      </Section>
      <Separator />
      <Section>
        <MenuItem>
          <IconSettings />
          <Text>Profil</Text>
        </MenuItem>
        <MenuItem>
          <IconLogout />
          <Text>Logout</Text>
        </MenuItem>
      </Section>
    </ContextMenu>
  </ContextMenuTrigger>
</HeaderNavigation>
```

---

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