# Navigation

Die Navigation dient der Orientierung und führt zu den Unterseiten einer Anwendung.

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

<Navigation aria-label="Companies">
  <Link href="https://www.apple.com">Apple</Link>
  <Link href="https://www.mittwald.de" aria-current="page">
    mittwald
  </Link>
  <Link href="https://www.adobe.com">Adobe</Link>
  <Link href="https://www.google.com">Google</Link>
</Navigation>
```

---

# Best Practices

- Benenne die Menüeinträge kurz, prägnant und verständlich.
- Setze [Icons](https://flow.mittwald.de/components/content/icon) nur ergänzend ein, nicht als alleinige
  Information.
- Begrenze eine Gruppe auf etwa sieben bis acht Menüeinträge. So bleibt die
  Navigation übersichtlich.
- Setze einklappbare Gruppen bewusst ein. Sie verbessern den Überblick, können
  die Orientierung aber erschweren.

---

# Mit Icons

Menüeinträge lassen sich optional mit einem [Icon](https://flow.mittwald.de/components/content/icon)
versehen. Dies bietet Usern eine zusätzliche visuelle Orientierung über den
Inhalt der verlinkten Seite.

```tsx
import {
  IconCustomer,
  IconProject,
  IconServer,
  Link,
  Navigation,
  Text,
} from "@mittwald/flow-react-components";

<Navigation aria-label="Main menu">
  <Link href="#">
    <IconCustomer />
    <Text>Organisationen</Text>
  </Link>
  <Link href="#" aria-current="page">
    <IconServer />
    <Text>Server</Text>
  </Link>
  <Link href="#">
    <IconProject />
    <Text>Projekte</Text>
  </Link>
</Navigation>
```

---

# Mit Gruppen

Mehrere Menüeinträge können zu Gruppen zusammengefasst werden. Zur Kennzeichnung
dieser Gruppen eignet sich ein [Label](https://flow.mittwald.de/components/content/label).

```tsx
import {
  Label,
  Link,
  Navigation,
  NavigationGroup,
} from "@mittwald/flow-react-components";

<Navigation aria-label="Main navigation">
  <NavigationGroup>
    <Label>Allgemein</Label>
    <Link href="#">Dashboard</Link>
    <Link href="#" aria-current="page">
      Performance
    </Link>
  </NavigationGroup>
  <NavigationGroup>
    <Label>Components</Label>
    <Link href="#">Apps</Link>
    <Link href="#">Datenbanken</Link>
    <Link href="#">Domains</Link>
  </NavigationGroup>
</Navigation>
```

---

# Mit einklappbaren Gruppen

Mit der Property `collapsable` können Menügruppen ein- und ausklappbar gemacht
werden. Gerade bei umfangreichen Navigationen hilft dies, die Übersicht zu
wahren.

```tsx
import {
  Label,
  Link,
  Navigation,
  NavigationGroup,
} from "@mittwald/flow-react-components";

<Navigation aria-label="Main navigation">
  <NavigationGroup collapsable>
    <Label>Allgemein</Label>
    <Link href="#">Dashboard</Link>
    <Link href="#" aria-current="page">
      Performance
    </Link>
  </NavigationGroup>
  <NavigationGroup collapsable>
    <Label>Components</Label>
    <Link href="#">Apps</Link>
    <Link href="#">Datenbanken</Link>
    <Link href="#">Domains</Link>
  </NavigationGroup>
</Navigation>
```

---

# Mit eingeklappten Gruppen

Einklappbare Gruppen starten ausgeklappt. Mit `defaultExpanded={false}` starten
sie eingeklappt und der User klappt nur die Gruppen aus, die er braucht. Bei
vielen Gruppen entsteht so eine Übersicht auf einen Blick.

```tsx
import {
  Label,
  Link,
  Navigation,
  NavigationGroup,
} from "@mittwald/flow-react-components";

<Navigation aria-label="Main navigation">
  <NavigationGroup collapsable defaultExpanded={false}>
    <Label>Allgemein</Label>
    <Link href="#">Dashboard</Link>
    <Link href="#">Performance</Link>
  </NavigationGroup>
  <NavigationGroup collapsable>
    <Label>Components</Label>
    <Link href="#">Apps</Link>
    <Link href="#" aria-current="page">
      Datenbanken
    </Link>
    <Link href="#">Domains</Link>
  </NavigationGroup>
</Navigation>
```

---

# Kombiniere mit …

## Separator

Zur klaren Trennung von Menügruppen kann ein
[Separator](https://flow.mittwald.de/components/structure/separator) verwendet werden.

```tsx
import {
  Label,
  Link,
  Navigation,
  NavigationGroup,
  Separator,
} from "@mittwald/flow-react-components";

<Navigation aria-label="Main navigation">
  <NavigationGroup>
    <Label>Allgemein</Label>
    <Link href="#">Dashboard</Link>
    <Link href="#" aria-current="page">
      Performance
    </Link>
  </NavigationGroup>

  <Separator />

  <NavigationGroup>
    <Label>Komponenten</Label>
    <Link href="#">Apps</Link>
    <Link href="#">Datenbanken</Link>
    <Link href="#">Domains</Link>
  </NavigationGroup>
</Navigation>
```

## Badge

Menüeinträge können um ein [Badge](https://flow.mittwald.de/components/status/badge) erweitert werden um
zusätzliche Metainformationen wie „New“ oder „Beta“ anzuzeigen. Für
Anwendungsfälle wie ein Benachrichtigungscenter kann außerdem ein
[CounterBadge](https://flow.mittwald.de/components/status/counter-badge) verwendet werden.

```tsx
import {
  Badge,
  CounterBadge,
  Link,
  Navigation,
} from "@mittwald/flow-react-components";

<Navigation aria-label="Companies">
  <Link>Apps</Link>
  <Link aria-current="page">
    Container <Badge>Neu</Badge>
  </Link>
  <Link>
    Benachrichtigungen <CounterBadge count={3} />
  </Link>
</Navigation>
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. |

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