Version:

Side Nav ​

Die Side Nav stellt einen hierarchischen Menübaum dar und ermöglicht die Navigation zwischen Menüpunkten.

Overview ​

Intro ​

Die Side Nav ist die Komponente für einen hierarchischen Menübaum. Sie zeigt eine Liste von Menüpunkten mit beliebig vielen Unterebenen an, hebt den aktuell geöffneten Menüpunkt hervor und kann den Menübaum nach einem Suchbegriff filtern.

Die Side Nav ist der Menüteil des Navigation Panels . Das Navigation Panel selbst ist keine Komponente, sondern ein Muster, das die Side Nav mit dem Drawer-Bereich des App Layouts sowie einer Überschrift und einem Suchfeld kombiniert.

Technische Grundlage

Die Side Nav besteht aus <vaadin-side-nav> und <vaadin-side-nav-item> und wird um das Mate-Addon <mate-side-nav-addon> ergänzt. Das Addon erzeugt die Menüpunkte aus den übergebenen Menüdaten und übernimmt die Filterung.

Das Addon setzt voraus, dass es direkt innerhalb einer <vaadin-side-nav> platziert ist. Außerhalb dieses Elements bleibt es wirkungslos.

Die Scrollbarkeit des Menübaums stellt das Mate-Theme bereit. Ein zusätzliches Scroll-Element um die Side Nav ist deshalb nicht erforderlich.

Im Design System ist für diese Komponente bisher kein Figma-Element hinterlegt. Die Darstellung der Menüpunkte ist in der Dokumentation des Navigation Panels abgebildet.

Verwendung ​

👍 Do👎 Don't
...wenn eine Liste von Menüpunkten mit möglichen Unterpunkten dargestellt werden soll.
...wenn Nutzer über ein Menü zwischen den Bereichen eines Moduls oder einer Anwendung navigieren sollen.
...wenn der Menübaum durchsucht bzw. gefiltert werden soll.		...wenn zwischen verschiedenen Ansichten innerhalb einer Seite gewechselt werden soll (hierzu die Tabs verwenden).
...wenn zwischen den Abschnitten einer Seite navigiert werden soll (hierzu die Anchor-Nav verwenden).
...wenn zwischen Modulen gewechselt werden soll (hierzu die Application Bar verwenden).

Guidelines ​

Aufbau ​

Die Side Nav besteht aus einer vertikalen Liste von Menüpunkten. Jeder Menüpunkt besteht aus seinem Namen und, sofern er Unterpunkte besitzt, einem Chevron-Icon links vom Namen zum Auf- und Zuklappen der Unterpunkte. Menüpunkte ohne Unterpunkte werden auf derselben Textkante ausgerichtet wie Menüpunkte mit Chevron-Icon. Unterpunkte werden gegenüber ihrem Übermenüpunkt eingerückt dargestellt.

Ein Menüpunkt verweist entweder auf eine Zielseite oder fungiert ausschließlich als strukturierender Knoten mit Unterpunkten. Beides gleichzeitig ist nicht möglich: Sobald für einen Menüpunkt Unterpunkte hinterlegt sind, erhält er kein eigenes Navigationsziel.

Da die Menüpunkte als Links dargestellt werden, kann über das Kontextmenü des Browsers eine Zielseite in einem neuen Tab oder Fenster geöffnet werden.

Ohne weitere Anbindung führt ein Klick auf einen Menüpunkt zu einem vollständigen Neuladen der Seite. Für Anwendungen mit clientseitigem Routing stellt die Komponente zwei Anknüpfungspunkte bereit: eine Rückruffunktion, die den Standardklick abbricht und das Navigationsziel des angeklickten Menüpunkts an das Routing der Anwendung übergibt, sowie eine Eigenschaft für den aktuellen Ort, über die die Komponente bei jedem Wechsel der Route über den neuen Stand informiert wird. Die Hervorhebung des aktuellen Menüpunkts erfolgt beim Aufruf einer Seite von selbst; nur bei clientseitigem Routing braucht die Komponente diesen Stand, um der gewechselten Route zu folgen.

Welches Routing eine Anwendung einsetzt, ist im Design System nicht festgelegt; die Anbindung verantwortet die Anwendung mit den Mitteln ihres Frameworks.

Info für Dev

Die beiden Anknüpfungspunkte liegen an der <vaadin-side-nav> selbst: "onNavigate" für die Rückruffunktion und "location" für den aktuellen Ort. Das Mate-Addon belegt keinen von beiden - die Anwendung muss sie selbst setzen.

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

Anordnung & Gruppierung ​

Die Side Nav füllt die Breite des Bereichs, in dem sie platziert wird, und wächst in der Höhe mit der Anzahl der Menüpunkte. Reicht die verfügbare Höhe nicht aus, wird der Menübaum scrollbar.

Im Regelfall wird die Side Nav im Drawer-Bereich des App Layouts platziert und dort zum Navigation Panel zusammengesetzt. Die Reihenfolge der Menüpunkte ergibt sich aus den Menüdaten der Anwendung; die Komponente sortiert nicht selbst.

Varianten/Typen ​

Für die Side Nav sind im Design System keine Varianten definiert. Die von Vaadin angebotene Theme-Variante zur Hervorhebung des aktuellen Menüpunkts wird im Mate-Theme nicht verwendet.

Verhalten ​

Ein Klick auf einen Menüpunkt mit Navigationsziel öffnet die zugehörige Seite. Der aktuell geöffnete Menüpunkt wird farblich hervorgehoben.

Ein Klick auf das Chevron-Icon eines Knotens klappt dessen Unterpunkte auf bzw. zu. Das Chevron-Icon zeigt im zugeklappten Zustand nach rechts und im aufgeklappten Zustand nach unten.

Ist der Name eines Menüpunkts zu lang für die verfügbare Breite, wird er abgeschnitten. In diesem Fall wird der vollständige Name als Tooltip angezeigt, sobald der Menüpunkt mit der Maus überfahren oder fokussiert wird. Ist der Name vollständig sichtbar, erscheint kein Tooltip.

Die Menüpunkte werden nicht einzeln ausgezeichnet, sondern als Menüdaten an die Komponente übergeben. Ein Eintrag besteht aus einem Namen, optional einem Navigationsziel und optional einer Liste von Unterpunkten. Aus diesen Daten baut die Komponente den verschachtelten Menübaum selbst auf. Ändern sich die Menüdaten, wird der Menübaum neu aufgebaut.

Zusätzlich kann pro Eintrag hinterlegt werden, ob auch untergeordnete Routen als "aktueller Menüpunkt" gelten sollen. Damit bleibt ein Menüpunkt hervorgehoben, während der Nutzer sich in einer seiner Unterseiten befindet.

Als aktueller Menüpunkt gilt standardmäßig derjenige, dessen Navigationsziel genau dem aktuellen Ort entspricht. Enthält das Navigationsziel Abfrageparameter, müssen diese ebenfalls im aktuellen Ort enthalten sein; zusätzliche Parameter im aktuellen Ort bleiben unberücksichtigt. Ist für einen Eintrag hinterlegt, dass auch untergeordnete Routen gelten, umfasst der Vergleich zusätzlich alle darunterliegenden Routen.

Info für Dev

Das Mate-Addon setzt Navigationsziel und die Einstellung für untergeordnete Routen nur an Einträgen ohne Unterpunkte. Technisch könnte ein <vaadin-side-nav-item> auch mit Unterpunkten ein eigenes Navigationsziel tragen; das Design System schließt diese Kombination bewusst aus (siehe Gründe für das Design).

Filterung ​

Die Side Nav kann den Menübaum nach einem Suchbegriff filtern. Der Suchbegriff wird der Komponente als Wert übergeben; ein Suchfeld ist nicht Teil der Komponente.

Gefiltert wird nach einer zusammenhängenden Buchstabenfolge im Namen des Menüpunkts, wobei Groß- und Kleinschreibung nicht unterschieden wird. Die Filterung wirkt über alle Hierarchieebenen: Ein Knoten bleibt sichtbar, solange er selbst oder einer seiner Unterpunkte den Suchbegriff enthält. Knoten, in denen ein Treffer liegt, werden automatisch aufgeklappt, damit die Treffer unmittelbar sichtbar sind. Ist kein Suchbegriff gesetzt, wird der vollständige Menübaum angezeigt.

Der Neuaufbau des Menübaums erfolgt verzögert, damit bei schneller Eingabe nicht bei jedem Tastenanschlag neu gefiltert wird.

Info für Dev

Bei jeder Änderung des Suchbegriffs oder der Menüdaten wird der Menübaum vollständig neu aufgebaut. Ein von den Nutzern manuell eingestellter Auf-/Zuklapp-Zustand bleibt dabei nicht erhalten: Nach dem Neuaufbau sind nur diejenigen Knoten aufgeklappt, in denen ein Treffer des aktuellen Suchbegriffs liegt. Wird der Suchbegriff geleert, sind alle Knoten zugeklappt.

Verwendung als Teil oder eigenständig ​

Die Side Nav ist eine eigenständige Komponente und technisch auch außerhalb des App Layouts verwendbar. Gestalterisch ist sie im Design System jedoch als Menüteil des Navigation Panels vorgesehen. Für eine Verwendung außerhalb des Navigation Panels sind im Design System keine Muster definiert.

Das Mate-Addon ist dagegen nicht eigenständig nutzbar: Es muss direkt innerhalb der Side Nav platziert werden und hat außerhalb keine Wirkung. Einzelne Menüpunkte können grundsätzlich auch von Hand ausgezeichnet werden, statt sie über die Menüdaten des Addons erzeugen zu lassen. Empfohlen wird das nicht, weil damit die Filterung und die Tooltip-Behandlung der Komponente entfallen.

States ​

Nicht ausgewählt

Ein Menüpunkt, der nicht dem aktuell geöffneten Ziel entspricht, wird ohne Hervorhebung dargestellt.

Aktueller Menüpunkt

Der Menüpunkt, der der aktuell geöffneten Seite entspricht, wird durch eine Hintergrundfläche und eine hervorgehobene Textfarbe gekennzeichnet.

Hover

Der Menüpunkt unter dem Mauszeiger erhält eine Hintergrundfläche. Bei verschachtelten Menüpunkten wird immer nur der Menüpunkt hervorgehoben, über dem der Mauszeiger unmittelbar steht, nicht zusätzlich dessen Übermenüpunkt.

Aktiv

Während des Klicks wird der Menüpunkt durch eine abweichende Hintergrundfläche gekennzeichnet.

Fokus

Ein per Tastatur fokussierter Menüpunkt erhält einen Fokusrahmen.

Responsives Verhalten ​

Die Side Nav selbst hat kein eigenes responsives Verhalten. Sie passt sich der Breite ihres Containers an. Das responsive Verhalten des umgebenden Bereichs - insbesondere das temporäre Überlagern des Inhaltsbereichs auf kleinen Bildschirmen - wird vom App Layout gesteuert und ist beim Navigation Panel beschrieben.

Barrierefreiheit ​

Tastaturbedienung

Menüpunkte sind über die Tabulatortaste ("Tab") und Hochstell- und Tabulatortaste ("Shift" + "Tab") erreichbar und werden dabei mit einem Fokusrahmen gekennzeichnet. Ein fokussierter Menüpunkt kann mit Eingabetaste ("Enter") ausgewählt werden.

Bei einem Menüpunkt mit Unterpunkten wird mit der Tabulatortaste zwischen dem Menüpunkt selbst und dem Chevron-Icon gewechselt. Das Chevron-Icon ist ein eigenes Bedienelement: Es klappt die Unterpunkte mit Eingabetaste ("Enter") oder Leerzeichentaste ("Space") auf und zu und trägt eine Beschriftung für Screenreader, die das Auf- und Zuklappen beschreibt.

Ob zusätzlich eine Navigation zwischen den Menüpunkten über die Pfeiltasten vorgesehen ist, ist im Design System nicht abschließend festgelegt. Die Tastaturbedienung des Navigation Panels als Ganzes ist beim Navigation Panel beschrieben.