Version:
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.
broken_image
Navigation Panel
Technische Grundlage
Das Navigation Panel ist keine eigene technische Komponente. Es wird in der Anwendung aus zwei Komponenten des Design Systems zusammengesetzt: dem App Layout (Rahmen, Auf- und Zuklappen, Breitenverstellung) und der Side Nav (Menübaum und Menüfilterung). Überschrift, Suchfeld und Menüdaten sind Eigenleistung der Anwendung.
Das Navigation Panel wird ausschließlich im Drawer-Bereich des App Layouts verwendet und ist außerhalb des App Layouts nicht sinnvoll einsetzbar.
Verwendung
Das Navigation Panel 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 Navigation Panel 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 Navigation Panels befindet sich die Leiste zum Verschieben der Breite des Menüs.
broken_image
Aufbau Navigation Panel
Zusammensetzung
Das Navigation Panel wird in der Anwendung zusammengesetzt. Die folgende Tabelle ordnet jeden Bestandteil aus dem Abschnitt Aufbau seiner Herkunft zu.
| Bestandteil | Herkunft |
|---|---|
| Rahmen des Panels, Auf- und Zuklappen, Chevron-Icons, Leiste zum Verbreitern | Kommt fertig aus dem App Layout (Drawer-Bereich). Die Anwendung platziert lediglich Inhalte im Drawer. |
| (3) Menüpunkte, Hierarchieebenen, Auf- und Zuklappen der Untermenüpunkte, Hervorhebung des aktiven Menüpunkts, Menüfilterung | Kommt fertig aus der Side Nav . Die Anwendung übergibt die Menüdaten und den Filtertext. |
| (1) Name des Moduls | Eigenleistung der Anwendung. Ein Überschriftenelement im Drawer-Bereich; im Design System ist dafür kein eigenes Element definiert. |
| (2) Suchfeld | Eigenleistung der Anwendung. Ein Text Field im Drawer-Bereich, dessen Wert an die Filter-Eigenschaft der Side Nav gebunden wird. |
| Menüdaten und Anbindung an das Routing der Anwendung | Eigenleistung der Anwendung. |
Die Zusammensetzung erfolgt in dieser Reihenfolge:
- App Layout mit dem Mate App Layout Addon aufsetzen (siehe App Layout ).
- Im Drawer-Bereich die Überschrift mit dem Modulnamen platzieren.
- Darunter das Suchfeld platzieren.
- Darunter die Side Nav mit den Menüdaten platzieren (siehe Side Nav ).
- Den Wert des Suchfelds an die Filter-Eigenschaft der Side Nav binden.
Info für Dev
Die Anordnung von Modulname und Suchfeld im Drawer-Bereich ist gestalterisch nicht durch das Design System vorgegeben. Im Theme sind für einen umschließenden Container mit den Bereichen "title" und "filter" bereits Abstände hinterlegt, ein zugehöriges Element existiert im Design System aber noch nicht. Bis dahin verantwortet die Anwendung die Platzierung beider Elemente selbst.
Verhalten
Standardmäßig ist das Navigation Panel geöffnet. Wenn das Navigation Panel in Kombination mit der Application Bar verwendet 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 Navigation Panel 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 Navigation Panels 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 Navigation Panel in diesem Fall automatisch wieder.
Die Funktion „Im Menü suchen“ ist eine Filterung des Menübaums nach der eingegebenen Buchstabenfolge. Gesucht wird nach einer zusammenhängenden Buchstabenfolge im Namen des Menüpunkts; Groß- und Kleinschreibung werden dabei nicht unterschieden. So lange ein Übermenüpunkt oder ein Untermenüpunkt eines Knotens die Buchstabenfolge enthält, wird der gesamte Knoten angezeigt. Knoten, in denen ein Treffer liegt, werden automatisch aufgeklappt. Die Filterung wird verzögert ausgeführt, damit der Menübaum bei schneller Eingabe nicht bei jedem Tastenanschlag neu aufgebaut wird. Das Filterverhalten ist Teil der Side Nav .
Das Suchfeld selbst ist nicht Teil der Side Nav, sondern wird von der Anwendung gestellt (siehe Zusammensetzung).
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.
Die Icons zum Auf- und Zuklappen des Panels gehören zum App Layout . Ihre Beschriftung für Screenreader wird über die Internationalisierung des App Layouts gesetzt und muss von der Anwendung befüllt werden (siehe App Layout ).
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.