Code
HTML
Der Kopfbereich wird als sog. Landmark mit dem <header>-Element ausgezeichnet, die darin enthaltene Navigation mit dem <nav>-Element.
WAI-ARIA
Immer wenn mehrere gleichartige Landmarks wie z. B. <nav> auf einer Seite benutzt werden, dann müssen diese über ein zusätzliches aria-label beschrieben werden, um unterscheidbar zu sein. Alternativ kann auch eine beschreibende Zwischenüberschrift per aria-labelledby referenziert werden, die die nötigen Informationen bereitstellt.
Jenseits der ARIA-Attribute für die Dropdown-Navigation werden keine weiteren ARIA-Rollen oder -Attribute benötigt.
Skip-Links
Im Header werden Skip-Links benutzt, um unmittelbar bestimmte Bereiche einer Seite per Tastatur anspringen zu können und damit auch andere, für den Nutzungskontext irrelevante Bereiche zu überspringen. Dafür wird visually-hidden-focusable Klasse verwendet, wie in folgendem Beispiel:
<div>
<a href="#unternavigation" class="visually-hidden-focusable"
>Zur Unternavigation</a
>
<a href="#hauptnavigation" class="visually-hidden-focusable"
>Zur Hauptnavigation</a
>
</div>
JavaScript
Für die Ein- und Ausklappfunktionalität des Menüs muss die Datei dropdown.js eingebunden sein.
Dropdown
Dropdowns sind umschaltbare, kontextbezogene Overlays zur Anzeige von Linklisten und mehr. Sie werden durch das mitgelieferte Dropdown-JavaScript-Plugin interaktiv. Sie werden grundsätzlich durch aktives Klicken umgeschaltet, nie durch alleiniges Hover.
Das Design System bietet integrierte Unterstützung für die meisten Standard-Tastaturinteraktionen in Menüs, wie z. B. die Möglichkeit, sich mit den Cursortasten durch einzelne .dropdown-item zu bewegen und das Menü mit der esc-Taste zu schließen.
Beispiel
Schachteln Sie den Toggle des Dropdowns (Schaltfläche oder Link) und das Dropdown-Menü in ein .dropdown oder ein anderes Element ein, das die position: relative angibt. Dropdowns können von <a> oder <button>-Elementen ausgelöst werden, um Ihren Bedürfnissen besser zu entsprechen. Die hier gezeigten Beispiele verwenden semantische <ul>-Elemente, wo es angebracht ist, aber benutzerdefiniertes Markup wird unterstützt.
Trotz dieser optionalen Alternativen sollte das auslösende Element in der Regel ein echtes <button>-Element sein, Hilfskonstrukte wie <a role="button" onClick="…"> oder Ähnliches sind nicht erwünscht.
<li class="dropdown">
<button
type="button"
aria-expanded="false"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
data-bs-auto-close="true"
>Menü</button>
<ul class="dropdown-menu dropdown-menu-end">
<li class="mx-3 mx-lg-0">
<a href="#" class="dropdown-item">Untermenü 1</a>
</li>
<li class="mx-3 mx-lg-0">
<a href="#" class="dropdown-item">Untermenü 2</a>
</li>
</ul>
</li>
Verwendung des Dropdowns
Über Daten-Attribute schaltet das Dropdown-Plugin verborgene Inhalte (Dropdown-Menüs) um, indem es die Klasse .show des übergeordneten .dropdown-menu umschaltet. Das Attribut data-bs-toggle="dropdown" wird zum Schließen von Dropdown-Menüs auf Anwendungsebene verwendet, daher ist es ratsam, es immer zu verwenden.
Über data-Attribute
Fügen Sie data-bs-toggle="dropdown" zu einem Link oder einer Schaltfläche hinzu, um ein Dropdown zu aktivieren.
<div class="dropdown">
<button type="button" data-bs-toggle="dropdown" aria-expanded="false">
Untermenü
</button>
<ul class="dropdown-menu">
<li class="mx-3 mx-lg-0">
<a href="#" class="dropdown-item">Dropdown Menü 1</a>
</li>
…
</ul>
</div>
