Ein Dropdown ist ein Bedienelement, das beim Klick oder Hover eine Liste von Optionen aufklappt; ein Toggle schaltet einen Inhaltsbereich sichtbar oder unsichtbar, meist per Klick auf eine Überschrift oder ein Symbol.
Was bedeutet das?
Dropdowns und Toggles sind grundlegende Interaktionsmuster in Weboberflächen. Ein Dropdown (auch Ausklappmenü oder Klappmenü) zeigt zunächst nur einen sichtbaren Eintrag oder ein Label. Beim Klick oder beim Überfahren mit der Maus öffnet sich darunter eine Liste weiterer Optionen. Navigationsmenüs mit Unterseiten, Formular-Auswahlfelder (<select>) und Sprachauswahlen auf mehrsprachigen Websites sind typische Dropdown-Implementierungen. Technisch werden sie entweder über das native <select>-Element des Browsers oder über benutzerdefiniertes HTML mit CSS-Sichtbarkeitsregeln und JavaScript-Klick-Events realisiert.
Ein Toggle ist ein Umschalter zwischen zwei Zuständen, üblicherweise „sichtbar“ und „versteckt“. Klickt ein Benutzer auf eine Überschrift oder ein Symbol, wird der darunter liegende Inhaltsbereich eingeblendet; ein erneuter Klick versteckt ihn wieder. Mehrere untereinander angeordnete Toggles bilden zusammen ein Akkordeon. Im Bereich Navigation wird ein Toggle typischerweise als Hamburger-Symbol auf mobilen Bildschirmen eingesetzt, das das Navigationsmenü ein- und ausblendet. Beide Elemente sind auf responsiven Websites unverzichtbar, um Inhalte auf kleinen Bildschirmen übersichtlich zu halten.
In WordPress sind Dropdowns vor allem in der Navigation relevant. Über Design > Menüs werden Unterseiten als untergeordnete Einträge eines Menüpunkts eingerichtet. Das Theme steuert, ob die Unterpunkte beim Hover oder beim Klick erscheinen und wie sie animiert werden. Block-Themes nutzen den Navigationsblock im Site-Editor, der verschachtelte Menüs mit konfigurierbarem Dropdown-Verhalten unterstützt. Für Inhalts-Toggles bieten Page-Builder-Plugins Module wie „Akkordeon“ oder „Toggle“ an, die fertige Implementierungen mitbringen.
Beispiel aus der Praxis
Eine Unternehmenswebsite hat im Hauptmenü den Eintrag „Leistungen“ mit fünf Unterseiten. Im WordPress-Menü werden diese als untergeordnete Einträge eingerichtet. Das Theme rendert daraus auf dem Desktop ein Hover-Dropdown: Beim Überfahren von „Leistungen“ erscheinen die Unterpunkte. Auf mobilen Geräten erscheint stattdessen ein kleiner Pfeil neben „Leistungen“; ein Klick darauf öffnet die Untereinträge als Toggle-Liste, die dann den gleichen Platz nutzt wie auf dem Desktop. Beides wird ohne Änderungen am Code automatisch vom Theme gesteuert.
Tipp aus der Praxis
Dropdown-Navigationen bereiten häufig Zugänglichkeitsprobleme. Benutzer, die ausschließlich per Tastatur navigieren, kommen zu Untermenüpunkten nur dann, wenn das Theme korrekte ARIA-Attribute setzt (aria-expanded, aria-haspopup="true") und Tastatur-Event-Handler implementiert. Testen Sie Ihre Navigation: Können Sie mit der Tab-Taste alle Menüpunkte erreichen und mit der Eingabetaste Untermenüs öffnen? Fährt die Tab-Reihenfolge logisch durch alle sichtbaren Punkte? Falls nicht, können ein Accessibility-Plugin oder ein Theme-Wechsel zu einem WCAG-konformen Produkt das Problem beheben.