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 Subnavigation nimmt bis zum Breakpoint MD stets die volle Breite des Layout-Grids ein.
Die Subnavigation wird immer nach den Breadcrumbs positioniert.
Zwischen den Breadcrumbs und der Subnavigation 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 Subnavigation 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 Subnavigation 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 Subnavigation 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.
Die Subnavigation 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. Der aktuell ausgewählte Link ist mit dem Attribut aria-current="page" versehen.
Beinhaltet die Subnavigation einen Header dann kollabiert sie in der responsiven Ansicht auf kleinen Viewports oder bei starker Textvergrößerung 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.
Das Skript subNavigation.js (oder die gesamte main.js) setzt beim Klick auf ein Navigationselement das Attribut aria-current="page" sowie die Klasse .nav-link--current zur visuellen Hervorhebung des aktiven Eintrags. Voraussetzung ist das Attribut data-desy-subnavigation am <nav>-Element. Alle Beispiele auf dieser Seite und auf der Beispielseite Subnavigation verwenden dieses Skript.
Subnavigation
<navclass="ds-sidenav "aria-label="Unternavigation"data-desy-subnavigation> <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 ds-sidenav__navbar collapse"> <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. Im Kontrastmodus bzw. Dark Mode werden enthaltene Icons im Farbschema der benutzerdefinierten Farben wahrnehmbar und ausreichend kontrastierend dargestellt.
