Diese Form der Navigation wird eingesetzt, wenn auf einer Seite oder Maske verschiedene Unterbereiche angeboten werden, die einzeln angesprungen werden können.
Einsatzbeispiele für die Varianten
Positionierung & responsives Verhalten
Die Seitennavigation nimmt bis zum Breakpoint MD stets die volle Breite des Layout-Grids ein.
Die Seitennavigation wird immer nach den Breadcrumbs positioniert.
Zwischen den Breadcrumbs und der Seitennavigation bleiben 32px Weißraum.
Bis zum Breakpoint MD legt sich das geöffnete Menü nicht über den Seiteninhalt, sondern schiebt diesen nach unten.
Breakpoint XS (≤ 575px)
Breakpoint XS (≤ 575px) geöffnet
Breakpoint MD (≥ 768px)
Breakpoint MD geöffnet
Ab dem Breakpoint LG erstreckt sich die Seitennavigation auf 3 Grid-Spalten neben dem eigentlichen Masken-Inhalt (9 Grid-Spalten).
Breakpoint LG (≥ 992px)Breakpoint XL (≥ 1200px)
Do’s and Dont’s
So:
Inhaltlich zusammenhängende Bereiche eines Prozesses gruppieren
So nicht:
Einsatz auf Seiten mit lediglich ein oder zwei unmittelbar erreichbaren Unterbereichen
Zu kleinteilige Gruppierungen, die zu einer Vielzahl von Subnavigationen führen
Design
Die Seitennavigation enthält optional ein Icon links neben einem frei zu wählenden, sinnbildenden Text; beide vermitteln im Zusammenspiel die Funktion der Komponente. Wenn es sich bei der Seitennavigation um ein Collapsible handelt, dann ist das Chevron-Icon rechts die Aufforderung, ein geschlossenes Menü zu öffnen bzw. ein geöffnetes Menü zu schließen. Im geöffneten Menü selbst sind Icons (Pfeile oder andere gestaltete Elemente) als Verdeutlichung der Funktion der einzelnen Menüpunkte optional.
Typografie
Ab dem Breakpoint XS (≥ 0px)
Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
Element: Current — Ausgewählter Listenpunkt - transparent
Schriftschnitt
font-weight
700
Schatten (innen)
box-shadow
inset .1875rem 0 0 #2D6F9E
Farbüberlagerung (Schatten)
…
rgba(0, 0, 0, 0)
Animation
transition
80ms cubic-bezier(.65, 0, .35, 1)
Code
HTML
Die Seitennavigation wird als sog. Landmark mit dem <nav>-Element ausgezeichnet.
WAI-ARIA
Immer wenn mehrere gleichartige Landmarks wie z. B. <nav> auf einer Seite benutzt werden und keine sichtbare Zwischenüberschrift verwendet werden kann, dann müssen diese über ein zusätzliches aria-label beschrieben werden, um unterscheidbar zu sein. Alternativ kann auch eine beschreibende Überschrift per aria-labelledby referenziert werden, die die nötigen Informationen bereitstellt.
In der responsiven Ansicht auf kleinen Viewports oder bei starker Textvergrößerung kollabiert die Seitennavigation nach Art eines Menüs. Für die Vermittlung der Funktionalität und der Zustände sind weitere ARIA-Attribute notwendig wie aria-expanded="true | false" zur Kommunikation des Zustands und aria-controls="IDREF" zur logischen Verknüpfung des Buttons mit der dazugehörigen Liste für die Navigationsschritte.
JavaScript
Für das Ein- und Ausklappen der Subnavigation in der mobilen Version müssen die data-Attribute data-bs-toggle="collapse" und data-bs-target="#IDREF" entsprechend des Code-Beispiels gesetzt werden. Zudem muss entweder das Skript collapse.js oder die gesamte main.js eingebunden werden.
Subnavigation
<navclass="ds-sidenav"aria-label="Unternavigation"> <buttonclass="btn btn--primary ds-sidenav__toggle-btn collapsed d-xl-none"type="button"data-bs-toggle="collapse"data-bs-target="#side-navbar-1"aria-expanded="false"aria-controls="side-navbar-1"> <spanclass="ds-sidenav__toggle-btn__container"> <spanclass="ds-icon-submenu"aria-hidden="true"></span> <spanclass="ds-sidenav__toggle-btn__container__title"> <span>Überschrift Subnavigation</span> :<spanclass="ds-sidenav__selected-item"> Kategorie mit etwas längerem Text 2</span> </span> <spanclass="ds-icon-chevron-down"aria-hidden="true"></span> </span> </button> <spanclass="ds-sidenav__headline d-none d-xl-block"> Überschrift Subnavigation </span> <ulid="side-navbar-1"class="navbar-nav collapse ds-sidenav__navbar"> <liclass="ds-sidenav__item"> <ahref="#"class="nav-link anchor ds-sidenav__item-link"> <spanclass="anchor__text">Kategorie 1</span> </a> </li> <liclass="ds-sidenav__item"> <ahref="#"class="nav-link anchor ds-sidenav__item-link"> <spanclass="anchor__text">Kategorie 2</span> </a> </li> <liclass="ds-sidenav__item"> <ahref="#"class="nav-link anchor ds-sidenav__item-link"> <spanclass="anchor__text">Kategorie mit etwas längerem Text 1</span> </a> </li> <liclass="ds-sidenav__item"> <ahref="#"class="nav-link nav-link--current anchor ds-sidenav__item-link"aria-current='page'> <spanclass="anchor__text">Kategorie mit etwas längerem Text 2</span> </a> </li> </ul> </nav>
Bei der Implementierung der Subnavigation muss darauf geachtet werden, dass in geöffnetem Zustand keine fokussierbaren Elemente größtenteils überdeckt werden, sobald diese selbst den Fokus erhalten. Lösbar ist dies, indem die fokussierten Elemente zumindest zum Teil sichtbar in den Viewport scrollen.
Falls die Navigation eine beschreibende Überschrift enthält, dann soll der Container der Navigation auf diese per aria-labelledby="headingId" verweisen.
Rolle:
Wird im Screenreader als Navigation-Landmark identifiziert.
Fokus:
Kann über einen Skip Link des Seitenrahmens angesprungen werden, ist aber als Container selbst nicht fokussierbar.
Darstellung:
Der Schriftgrad kann Browser- oder Systemseitig um bis zu 200 % vergrößert werden, ohne dass Informationen verloren gehen. Bis zu 400 % müssen Inhalte so umbrechen, dass sie ohne horizontales Scrollen verfügbar sind.
