Navigation Panel

Overview

Intro

Das Navigation Panel, dient dazu, zwischen verschiedenen Menüpunkten zu wechseln. Zudem bietet es den Nutzenden einen Überblick über die zur Verfügung stehenden Funktionalitäten bzw. Inhalte.

Navigationspanel

Verwendung

Das Navigationspanel wird immer eingesetzt, wenn es innerhalb eines Softwaremoduls oder einer Anwendung Menüpunkte gibt, zwischen denen die Nutzer navigieren können sollen.

Guidelines

Aufbau

Das Navigationspanel besteht aus dem (1) Namen des Moduls, einem (2) Suchfeld, (3) Menüpunkten und einem (4) Icon zum Ausblenden des Panels. Die Menüpunkte können links vom Text einen Icon-Button haben, welcher zum Auf- und Zuklappen der Untermenüpunkte dient. Die Menüpunkte können entweder auf eine Zielseite verweisen oder ausschließlich als strukturierende Knoten ohne eigene Zielseite fungieren. Sie können aber nicht als strukturierende Knoten dienen und gleichzeitig auf eine Zielseite verweisen. Da es sich bei dem Menüpunkten um Anchors handelt, können diese mit einem Rechtsklick in einem neuen Tab geöffnet werden.

Im Menübaum können theoretisch unendlich viele Hierarchieebenen abgebildet werden. Es wird jedoch empfohlen, nur bis zu drei Hierarchieebenen darzustellen:

Menüpunkt 1

> Menüpunkt 1.1

> Menüpunkt 1.2

> Menüpunkt 1.2.1

Am rechten Rand des Navigationspanels befindet sich die Leiste zum Verschieben der Breite des Menüs.

Aufbau Navigationspanel

Verhalten

Standardmäßig ist das Navigation Panel geöffnet. Wenn das Navigation Panel in Kombination mit der Application Bar findet wird, befindet sich im geöffneten Zustand ein Icon zum Zuklappen direkt im Panel selbst. Sobald das Panel dann zugeklappt wird, erscheint das Icon zum erneuten Aufklappen in der Application Bar . Ein Klick darauf öffnet das Navigation Panel wieder. Wenn das Navigation Panel ohne Application Bar verwendet wird, gibt es ein Hamburger Menu im Global Header über das das Navigation Panel ein- und ausgeblendet werden kann.

Das geöffnete Menü befindet sich seitlich links neben dem Inhaltsbereich und verschiebt diesen entsprechend nach rechts. Es bleibt geöffnet, bis es aktiv wieder zugeklappt wird.

Beim Wechsel in ein neues Modul wird das Navigationspanel standardmäßig aufgeklappt dargestellt – auch dann, wenn es zuvor manuell zugeklappt wurde.

Menüeinträge mit Unterpunkten (Knotenpunkte) dienen lediglich der Strukturierung und führen nicht zu einer eigenen Zielseite.

Die Breite des Menüs kann von den Nutzern individuell angepasst werden, indem der rechte Rand des Navigationspanels mit dem Cursor gegriffen und verschoben wird.

Auf kleineren Bildschirmen (z.B. Tablet-Größe) ändert sich das Verhalten des Menüs zu einer responsiven Anzeige. Dies bedeutet, dass das Menü immer nur temporär eingeblendet wird und sich dann über die Inhalte des Inhaltsbereich legt. Bei Klick auf einen Menüpunkt schließt sich das Navigationspanel in diesem Fall automatisch wieder.

Die Funktion „Im Menü suchen“ ist eine Filterung des Menübaums nach der exakten eingegebenen Buchstabenfolge. So lange ein Übermenüpunkt oder ein Untermenüpunkt eines Knotens die Buchstabenfolge enthält wird der gesamte Knoten angezeigt.

Barrierefreiheit

Tastaturbedienung

Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") lässt sich zwischen dem Suchfeld und den Menüpunkten springen und es wird jeweils die ausgewählte Option fokussiert. Die Menüpunkten können mit den Pfeiltasten nach oben oder unten gewechselt werden. Gibt es in der Menüleiste eine Option mit Submenü, kann dieses über die Enter oder Leertaste ein- und ausgefahren werden. Fokussierte Elemente können mit Eingabetaste ("Enter") und auch per Leerzeichentaste ("Space") ausgewählt werden.

Gründe für das Design

Argumente

Warum haben wir uns dagegen entschieden eigene Navigationsziele für aufklappbare Menüeinträge (Knotenpunkte) zu erlauben?

Argumente für die Lösung

* Ein einheitliches Verhalten wird gewährleistet. In der Praxis ist nicht immer ein Navigationsziel für Knotenpunkte sinnvoll. Nutzer müssen somit nicht rätseln ob hinter aufklappbaren Einträgen ein Inhalt vorhanden ist oder nicht. * Die Lösung ist abwärtskompatibel. Implementierte Menüs müssen nicht geändert/angepasst werden. * Die Lösung ist flexibel. Bei bedarf können z.B. Übersichtsseiten als erster Unterpunkt genutzt werden.

Research zu dieser Komponente

Bisher wurden keine eigene Research Aktivitäten für diese Komponente durchgeführt.

Referenzen

https://www.nngroup.com/articles/hamburger-menus/

Develop Vue

Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/komponenten-application--docs

Development Flow

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252Fapp-layout