Navigation

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

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‍ 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‍ versehen. Dies bietet Usern eine zusätzliche visuelle Orientierung über den Inhalt der verlinkten Seite.

Mit Gruppen

Mehrere Menüeinträge können zu Gruppen zusammengefasst werden. Zur Kennzeichnung dieser Gruppen eignet sich ein Label‍.

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.

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.

Kombiniere mit …

Separator

Zur klaren Trennung von Menügruppen kann ein Separator‍ verwendet werden.

Badge

Menüeinträge können um ein Badge‍ erweitert werden um zusätzliche Metainformationen wie „New“ oder „Beta“ anzuzeigen. Für Anwendungsfälle wie ein Benachrichtigungscenter kann außerdem ein CounterBadge‍ verwendet werden.

Properties

Property	Type	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	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