# Navigation

Eine Navigation ist ein zentraler Baustein jeder Benutzeroberfläche. Sie hilft
Usern, Inhalte schnell und intuitiv zu finden. Sie verbindet verschiedene
Bereiche miteinander, macht Strukturen verständlich und unterstützt ein
konsistentes Nutzungserlebnis. Je nach Struktur und Komplexität einer Anwendung
kommen unterschiedliche Components zum Einsatz, die häufig sinnvoll miteinander
kombiniert werden.

---

# Best Practices

- **Komplexität reduzieren:** Gestalte Inhalte und Navigationen klar und
  verständlich. Eine reduzierte und konsistente Navigation verbessert die
  Orientierung und erleichtert die Nutzung.
- **Orientierung schaffen:** User sollten jederzeit erkennen können, wo sie sich
  befinden. Aktive Zustände, Breadcrumbs und die TabNavigation unterstützen
  dabei.
- **Suche integrieren:** Eine gut sichtbare Suche und Schnellzugriffe
  erleichtern besonders in komplexen Anwendungen den schnellen Zugriff auf
  Inhalte.
- **Konsistente Navigation:** Navigationsmuster und Positionierungen sollten
  innerhalb der gesamten Anwendung konsistent verwendet werden. Wiederkehrende
  Muster erleichtern das Verständnis und stärken die Orientierung.

---

# Navigationsstrukturen

Hauptnavigationen ermöglichen den Zugriff auf zentrale Bereiche einer Anwendung.
Ergänzende Navigationskomponenten innerhalb des Contents schaffen Orientierung,
erleichtern den Wechsel zwischen Ansichten und ermöglichen die Navigation auf
tieferer Ebene.

## Hauptnavigation

Es gibt zwei grundlegende Navigationsvarianten: HeaderNavigation und
SideNavigation. Welche eingesetzt wird, hängt vom Layout und der Komplexität der
Anwendung ab. Beachte hierbei die Best Practices der Navigationen.

```tsx
import {
  Avatar,
  Button,
  Flex,
  HeaderNavigation,
  Heading,
  IconSearch,
  Initials,
  Label,
  LayoutCard,
  Link,
  Navigation,
  NavigationGroup,
  IconDashboard,
  IconMonitoring,
  IconApp,
  IconContainer,
  Text,
  ColumnLayout,
} from "@mittwald/flow-react-components";

<Flex direction="column" rowGap="l">
  <Flex justify="end">
    <HeaderNavigation color="dark">
      <Link>Dashboard</Link>
      <Link aria-current="page">Projekt</Link>
      <Link>Server</Link>
      <Link>Organisation</Link>
      <Button aria-label="Suche">
        <IconSearch />
      </Button>
      <Button aria-label="Suche">
        <Avatar>
          <Initials>Max Mustermann</Initials>
        </Avatar>
      </Button>
    </HeaderNavigation>
  </Flex>
  <ColumnLayout l={[1, 3]} m={[1, 2]}>
    <LayoutCard>
      <Navigation>
        <Heading>Mein Projekt</Heading>
        <NavigationGroup>
          <Label>Allgemeines</Label>
          <Link aria-current="page">
            <IconDashboard />
            Dashboard
          </Link>
          <Link>
            <IconMonitoring />
            Monitoring
          </Link>
        </NavigationGroup>
        <NavigationGroup>
          <Label>Components</Label>
          <Link>
            <IconApp />
            Apps
          </Link>
          <Link>
            <IconContainer />
            Container
          </Link>
        </NavigationGroup>
      </Navigation>
    </LayoutCard>
    <LayoutCard>
      <Text>
        Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Cumque eius quam quas vel voluptas, ullam
        aliquid fugit. Voluptate harum accusantium rerum
        ullam modi blanditiis vitae, laborum ea tempore,
        dolore voluptas. Earum pariatur, similique corrupti
        id officia perferendis. Labore, similique. Earum,
        quas in. At dolorem corrupti blanditiis nulla
        deserunt laborum! Corrupti delectus aspernatur nihil
        nulla obcaecati ipsam porro sequi rem? Quam.
      </Text>
    </LayoutCard>
  </ColumnLayout>
</Flex>
```

### HeaderNaviagtion

Die [HeaderNavigation](/04-components/navigation/header-navigation), befindet
sich im oberen Bereich der Seite und eignet sich besonders für Hauptnavigationen
mit flacher Struktur und übersichtlicher Informationsarchitektur. Zusätzlich zu
den zentralen Navigationspunkten kann sie mit übergeordneten Funktionen ergänzt
werden, wie beispielsweise der Zugang zu einem Profil, eine globale Suche oder
globale Einstellungen.

### Navigation (SideNavigation)

Die [Navigation](/04-components/navigation/navigation) ist vertikal angeordnet
und eignet sich besonders für Seitenlayouts mit viel Platz in der Breite oder
für Anwendungen mit komplexeren Strukturen. Sie bietet ausreichend Platz für
viele Menüpunkte sowie verschachtelte Navigations-Ebenen.

Im mStudio wird die SideNavigation aufgrund der komplexen
Informationsarchitektur sowohl für Hauptnavigationspunkte als auch für
untergeordnete Navigationspunkte genutzt und in einer
[LayoudCard](/04-components/structure/layout-card) dargestellt.

---

## Content-Navigation

Die Components Breadcrumb, TabNavigation und List unterstützen bei der
Orientierung innerhalb des Contents und ermöglichen einen schnellen Wechsel
zwischen zusammengehörenden Bereichen oder das Navigieren in tiefere Ebenen.

```tsx
import {
  Flex,
  Breadcrumb,
  Link,
  Heading,
  LayoutCard,
  TabNavigation,
  Section,
  Text,
} from "@mittwald/flow-react-components";

<Flex direction="column" gap="m">
  <Breadcrumb color="dark">
    <Link>Projekt</Link>
    <Link>E-Mails</Link>
    <Link>E-Mail-Adresse</Link>
  </Breadcrumb>
  <Heading level={1} color="dark">
    mail@meinprojekt.de
  </Heading>
  <LayoutCard>
    <TabNavigation aria-label="E-Mail-Navigation">
      <Link href="#" aria-current="page">
        E-Mail-Adressen
      </Link>
      <Link href="#">Postausgänge</Link>
      <Link href="#">Archivierung</Link>
    </TabNavigation>
    <Section>
      <Text>
        Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Cumque eius quam quas vel voluptas, ullam
        aliquid fugit. Voluptate harum accusantium rerum
        ullam modi blanditiis vitae, laborum ea tempore,
        dolore voluptas. Earum pariatur, similique corrupti
        id officia perferendis. Labore, similique. Earum,
        quas in. At dolorem corrupti blanditiis nulla
        deserunt laborum! Corrupti delectus aspernatur nihil
        nulla obcaecati ipsam porro sequi rem? Quam.
      </Text>
    </Section>
  </LayoutCard>
</Flex>
```

### Breadcrumb

Die [Breadcrumb](/04-components/navigation/breadcrumb) zeigt den aktuellen Pfad
innerhalb einer hierarchischen Struktur an. Sie unterstützt die Orientierung,
indem sie den Usern jederzeit verdeutlicht, wo sie sich befinden. Zusätzlich
erleichtert sie die Rücknavigation zu übergeordneten Ebenen und verbessert damit
die Navigierbarkeit komplexerer Anwendungen.

### TabNavigation

Die [TabNavigation](/04-components/navigation/tab-navigation) ermöglicht das
Navigieren zwischen gleichrangigen Unterseiten. Durch ihre permanente
Sichtbarkeit behalten User den Überblick über die verfügbaren Bereiche und
erkennen am aktiven Zustand, wo sie sich gerade befinden. Reicht die verfügbare
Breite nicht aus, klappen überzählige Punkte automatisch in ein ContextMenu
zusammen.

### Listen, Raster und Tabellen

Die verschiedenen Darstellungen einer [List](/04-components/structure/list)
strukturieren Inhalte, schaffen Übersicht über ähnliche Elemente und ermöglichen
die Navigation zu detaillierteren Ansichten.

---

## Ergänzende Navigation

Klassische Navigationen können durch Verlinkungen, eine globale Suche oder
automatische Weiterleitungen ergänzt werden. Gerade in komplexen Anwendungen
möchten User schnell zu bestimmten Inhalten gelangen, ohne sich durch die
gesamte Navigationsstruktur bewegen zu müssen. Ergänzende Navigationskomponenten
ersetzen die Hauptnavigation nicht, sondern erweitern sie gezielt.

### Links

[Links](/04-components/navigation/link) ermöglichen den direkten Wechsel in
einen anderen Bereich der Anwendung oder zu externen Inhalten. User können dabei
selbst entscheiden, ob sie dem Wechsel folgen wollen. Daher sollten Links klar
und aussagekräftig benannt sein, damit erkennbar ist, welches Ziel sie haben.

### Suche

Die [Suche](/04-components/form-controls/search-field) ermöglicht den direkten
Zugriff auf Inhalte, Funktionen oder Bereiche, ohne mehrere Navigationsebenen
durchlaufen zu müssen. Besonders in komplexen Anwendungen mit vielen Inhalten
unterstützt sie User dabei, Informationen effizient und zielgerichtet zu finden.

### Weiterleitungen

Weiterleitungen führen User automatisch oder systemgesteuert zu einer anderen
Ansicht oder einem anderen Bereich der Anwendung. Sie sollten bewusst und
nachvollziehbar eingesetzt werden, da unerwartete Wechsel schnell zu
Orientierungsverlust führen können.

---

# Accessibility

Eine barrierefreie Navigation stellt sicher, dass alle User die Anwendung
zuverlässig bedienen können.

- **Semantische Struktur und ARIA-Rollen:** Verwende semantisch korrekte
  HTML-Elemente und ergänze diese bei Bedarf durch passende ARIA-Rollen und
  -Attribute. Dadurch können Screenreader Navigationsbereiche korrekt
  interpretieren und vermitteln.
- **Fokus-Reihenfolge und Tastaturbedienung:** Navigations-Elemente müssen
  vollständig per Tastatur erreichbar und bedienbar sein. Die Fokus-Reihenfolge
  sollte logisch aufgebaut sein und der visuellen Struktur folgen.
- **Verständliche Bezeichnungen:** Navigationspunkte sollten eindeutig benannt
  sein und verständlich kommunizieren, wohin sie führen. Dadurch wird die
  Orientierung zusätzlich verbessert.