Dropdown-Menü in WordPress
Untermenü anlegen und nachprüfen
Menüpunkt, Pfeil-Schalter, Untermenü: drei Stellen im Navigations-Block.
WordPress-Navigation
Bauen Sie erst den Baum, dann das Dropdown
Ein Untermenü entsteht durch Hierarchie. Die Einstellung „Beim Klicken öffnen“ macht daraus auf der Website einen Link und einen eigenen Schalter.
Design
- Website
- Editor
- Stile
Aktueller BereichNavigation
Listenansicht
Die Einrückung ist die Struktur: Beratung und Prüfung liegen innerhalb von Leistungen.
Einstellungen
Diese Optionen gehören zum übergeordneten Navigations-Block.
1Linköffnet /leistungen
2Schalteröffnet das Untermenü
Welchen Editor sehen Sie?
Zwei WordPress-Wege, derselbe Menübaum
Design → Editor → Navigation
Block-Theme
Wählen Sie „Leistungen“ in der Listenansicht. Nutzen Sie in seinen Optionen „Untermenü-Link hinzufügen“ oder im Editor die Schaltfläche „Untermenü hinzufügen“. Stellen Sie am Navigations-Block „Untermenüs beim Klicken öffnen“ ein und speichern Sie.
Design → Menüs
Klassisches oder hybrides Theme
Ziehen Sie „Beratung“ und „Prüfung“ direkt unter „Leistungen“ und etwas nach rechts. Alternativ nutzen Sie beim Eintrag die Verschiebeoption „Unter …“. Speichern Sie das Menü. Öffnen und Tastaturverhalten bestimmt danach das Theme.
Anatomie der Ausgabe
Der Pfeil gehört neben den Link
Der Link navigiert zur Übersichtsseite. Der Button ändert aria-expanded und die Sichtbarkeit des Untermenüs. Ein Button innerhalb eines Links wäre ein verschachteltes Bedienelement.
Link<a href="/leistungen">
Schalter<button aria-expanded="false">
Ziel<ul id="leistungen-menue" hidden>
Vereinfachtes HTML · Theme-Klassen können abweichen
<li class="wp-block-navigation-submenu">
<a href="/leistungen">Leistungen</a>
<button type="button"
aria-expanded="false"
aria-controls="leistungen-menue"
aria-label="Untermenü Leistungen öffnen">
<svg aria-hidden="true" focusable="false">
<!-- Pfeil -->
</svg>
</button>
<ul id="leistungen-menue" hidden>
<li><a href="/beratung">Beratung</a></li>
<li><a href="/pruefung">Prüfung</a></li>
</ul>
</li>Prüfen Sie die Struktur in Ihrer fertigen Website. WordPress und das aktive Theme erzeugen das endgültige Markup; bearbeiten Sie es nicht im Editor von Hand.
Aktuelle Anleitungen und Prüfmuster
WordPress dokumentiert den Navigations-Block mit „Open on click“ und das klassische Menüfenster mit eingerückten Unterpunkten. Das W3C-Muster für aufklappbare Navigation zeigt die erwarteten Zustände und Tasten.
So prüfen Sie es
Folgen Sie dem Weg, nicht nur dem Pfeil
- Tab bis „Leistungen“. Der Link ist ein verständliches Ziel.
- Weiter zum Schalter. Er hat einen Namen und meldet den eingeklappten Zustand.
- Enter oder Leertaste. Das Untermenü wird sichtbar und
aria-expandedwechselt auftrue. - Weiter mit Tab. Beratung und Prüfung sind erst jetzt erreichbar. Escape sollte schließen und den Fokus zum Schalter zurückführen.
Aus dem Prüfbericht
Drei Regeln im Menü
Kritisch Ein Menüpunkt ohne Beschriftung Regel link-name
Ein Menüpunkt, der nur ein Symbol trägt, hat keinen Linktext. Tragen Sie im Block eine Beschriftung ein, die das Ziel nennt.
Kritisch Der Pfeil neben dem Menüpunkt Regel button-name
Der Pfeil-Schalter öffnet das Untermenü. Ohne Namen bleibt er stumm; „Untermenü öffnen“ als aria-label genügt.
Kritisch Der Pfeil sitzt im Menülink Regel nested-interactive
Manche Themes setzen den Schalter in den Link. Nebeneinander bleiben Ziel und Untermenü zwei eigene Bedienelemente.
Zum Mitnehmen
Das WordPress-Untermenü, korrigiert
Eine Beschriftung, ein Name, zwei getrennte Elemente.
Korrektur in 3 Schritten ansehen
Jedem Menüpunkt eine Beschriftung geben
Ein leerer Menüpunkt entsteht schnell, wenn nur ein Symbol gesetzt wird. Der sichtbare Text wird zum Namen des Links.
KorrekturvergleichSchritt 1 · HTML Vorher
<li class="wp-block-navigation-item"> <a class="wp-block-navigation-item__content" href="/kontakt"></a> </li>Nachher
<li class="wp-block-navigation-item"> <a class="wp-block-navigation-item__content" href="/kontakt">Kontakt</a> </li>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Jeder Menüpunkt nennt sein Ziel.
Dem Pfeil-Schalter einen Namen geben
Der Pfeil ist für Vorleseprogramme verborgen. aria-label nennt die Aktion, aria-expanded den Zustand des Untermenüs.
KorrekturvergleichSchritt 2 · HTML Vorher
<button class="wp-block-navigation-submenu__toggle"> <svg aria-hidden="true"><use href="#pfeil"></use></svg> </button>Nachher
<button class="wp-block-navigation-submenu__toggle" aria-label="Untermenü Leistungen öffnen" aria-expanded="false"> <svg aria-hidden="true"><use href="#pfeil"></use></svg> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Tabben Sie auf den Pfeil. Ein Vorleseprogramm sagt „Untermenü Leistungen öffnen“.
Link und Pfeil trennen
Ein Schalter im Link ist ein verschachteltes Bedienelement. Nebeneinander führt der Link zur Übersicht und der Pfeil öffnet das Untermenü.
KorrekturvergleichSchritt 3 · HTML Vorher
<a href="/leistungen">Leistungen <button class="submenu-toggle" aria-label="Untermenü öffnen">▾</button> </a>Nachher
<a href="/leistungen">Leistungen</a> <button class="submenu-toggle" aria-label="Untermenü öffnen" aria-expanded="false">▾</button>Markierte Zeilen wurden geändert
So prüfen Sie es Tabben Sie durch das Menü. Link und Pfeil sind zwei getrennte Halte.