Navigation

Die Navigation dient als zentrales Element zur Orientierung innerhalb einer Anwendung oder Website. Sie besteht aus mehreren Menüeinträgen, die zu unterschiedlichen Unterseiten führen.GitHub

Playground

Verwende <Navigation />, um eine Navigation darzustellen.

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>

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 Separator

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

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

Components