Version:
Anchor-Nav
Overview
Intro
broken_image
Anchor-Nav
Die Anchor-Nav dient dazu, zwischen den Abschnitten einer Seite zu navigieren, und hilft dem Nutzer sich einen Überblick über die Inhalte der Seite zu verschaffen.
Die Anchor-Nav wird an der gleichen Stelle wie die Navigationsleiste platziert und wird dazu verwendet, um innerhalb einer Seite zwischen Abschnitten zu navigieren. Sie befindet sich immer oberhalb der zu navigierenden Abschnitte.
Verwendung
| 👍 Do | 👎 Don't |
|---|---|
| Verwenden wenn - eine Seite mehrere Abschnitte aufweist, zwischen denen innerhalb der Seite navigiert werden soll | Nicht verwenden wenn - zwischen mehreren Ansichten navigiert werden soll (hierzu die Sichtreiter verwenden) - zwischen mehreren Seiten eines linear zusammenhängenden Prozesses navigiert werden soll (hierzu die Prozessnavigation verwenden) |
Guidelines
Aufbau
Die Anchor-Nav besteht aus einer Linie, die die gesamte verfügbare Breite einnimmt. Oberhalb der Linie befinden sich die Namen der Abschnitte. Die Namenstexte sind horizontal im Abschnitt zentriert. Die Breite der Abschnitte passt sich an die Breite des Textes an.
Verhalten
Die Anchor-Nav befindet sich an der gleichen Stelle wie die Navigationsleiste und zeigt den Namen aller Ankerpunkte nebeneinander an. Der jeweils aktive/sichtbare Ankerpunkt wird hervorgehoben.
broken_image | enabled |
broken_image | selected |
Overflow Verhalten
Wenn nicht genügend Platz in der Breite vorhanden ist, um alle Punkte nebeneinander anzuzeigen, erscheinen auf der linken und rechten Seite der Anchor-Nav Pfeile, mit denen nach links und rechts gescrollt werden kann.
broken_image | Ohne Overflow |
broken_image | Mit Overflow |
Scroll Verhalten
Technisch basiert die Komponente auf den Tabs, kombiniert mit einem scrollbaren Bereich. Ein Klick auf einen Link in der Anchor‑Nav scrollt die gewählte Sektion in den sichtbaren Bereich. Danach steht die Sektionsüberschrift immer unterhalb der Anchor-Nav und der Navigationspunkt wird hervorgehoben.
Info für DDev
Die Anchor-Nav weist ein "sticky" Verhalten auf. Das heißt, sie kann beim nach unten Scrollen nicht aus dem Sichtbereich gescrollt werden. Wenn die Anchor-Nav mitten auf einer Seite platziert ist, scrollt sie mit den anderen Elementen nach oben bis sie den oberen Rand des Scrollbereichs erreicht hat und bleibt dann sichtbar. Dies hat den Vorteil, dass die Titel der Navigatonspunkte auch beim Scrollen sichtbar bleiben und geklickt werden können.
Scrollt der Nutzer im Inhaltsbereich, dann wird der jeweilige Navigationspunkt hervorgehoben, von dessen Inhalt der größte Teil zu sehen ist. Das heißt beim nach unten Scrollen wird automatisch der nächste Navigationspunkt hervorgehoben, sobald der zugehörige Inhalt zu einem großen Teil sichtbar wird.
Barrierefreiheit
Tastaturbedienung
Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") ist die Anchor-Nav fokussierbar. Einzelne Abschnitte lassen sich dann mit den Pfeiltasten ansteuern.
Ist ein Abschnittsname oder ein Pfeilbutton im Fokus, kann diese mittels Wagenrückholtaste ("Return"), Eingabetaste ("Enter") und auch per Leerzeichentaste ("Space") ausgewählt werden.