Was ist ein Dropdown-Menü?
Ein Dropdown-Menü ist ein Navigationselement, das beim Hovern oder Klicken auf einen Menüpunkt eine Liste mit weiteren Links aufklappt. Der Begriff kommt vom englischen „drop down” – die Einträge fallen buchstäblich nach unten auf. Dropdown-Menüs sind die am weitesten verbreitete Form der Website-Navigation und kommen auf nahezu jeder Website zum Einsatz, die mehr als eine Handvoll Seiten hat.
Im Unterschied zu Mega-Menüs zeigen Dropdown-Menüs ihre Einträge in einer einzelnen, vertikalen Liste an. Sie eignen sich besonders gut für Websites mit einer überschaubaren Anzahl an Unterseiten – typischerweise bis zu 30–40 Seiten.
So funktionieren Dropdown-Menüs
Technisch basiert ein Dropdown-Menü auf verschachtelten HTML-Listen. Der sichtbare Hauptmenüpunkt enthält eine untergeordnete Liste (<ul>), die per CSS zunächst ausgeblendet ist. Beim Hovern mit der Maus oder beim Klick wird diese Liste sichtbar – entweder sofort oder mit einer kurzen Animation.
Ein einfaches Dropdown-Menü besteht aus drei Schichten:
- Trigger: Der Hauptmenüpunkt, der das Dropdown auslöst
- Container: Das aufklappbare Element, das die Unterpunkte enthält
- Einträge: Die einzelnen Links innerhalb des Dropdown-Bereichs
In WordPress erstellt du Dropdown-Menüs direkt über den Menü-Editor unter Design → Menüs. Dort ziehst du Seiten einfach per Drag & Drop unter einen übergeordneten Menüpunkt – WordPress erzeugt daraus automatisch ein Dropdown.
Best Practices für UX
Ein Dropdown-Menü soll die Navigation erleichtern, nicht verkomplizieren. Damit das gelingt, haben sich einige Grundregeln bewährt:
- Maximal 7–8 Einträge pro Dropdown: Längere Listen überfordern Nutzer. Wenn du mehr Unterpunkte brauchst, ist ein Mega-Menü oder eine andere Struktur die bessere Wahl.
- Klare, beschreibende Bezeichnungen: „Leistungen” ist besser als „Mehr erfahren”, „Holzterrassen” ist besser als „Produkt A”. Nutzer entscheiden in Sekundenbruchteilen, ob ein Menüpunkt relevant ist.
- Hover-Verzögerung einbauen: Ein Dropdown, das sofort beim Überfahren mit der Maus aufklappt, nervt – vor allem, wenn es den Weg zu anderen Menüpunkten blockiert. Eine Verzögerung von 200–300 Millisekunden verhindert versehentliches Öffnen.
- Ausreichend große Klickflächen: Besonders auf Touchscreens müssen die einzelnen Einträge groß genug sein, um sie sicher zu treffen. Mindestens 44 × 44 Pixel empfiehlt Google als Tap-Target-Größe.
- Visuelles Feedback: Ein kleiner Pfeil oder ein Chevron-Icon neben dem Hauptmenüpunkt signalisiert, dass sich hier ein Dropdown verbirgt. Ohne diesen Hinweis übersehen Nutzer die Unterpunkte.
Dropdown-Menüs und SEO
Für Suchmaschinen sind Dropdown-Menüs grundsätzlich unproblematisch – vorausgesetzt, sie sind technisch sauber umgesetzt. Auf diese Punkte solltest du achten:
- HTML-basierte Struktur: Die Links im Dropdown müssen als echte
<a>-Tags in regulären HTML-Listen vorliegen. Menüs, die komplett per JavaScript erzeugt werden, können von Suchmaschinen unter Umständen nicht vollständig gecrawlt werden. - Interne Verlinkung nutzen: Jeder Link im Dropdown ist ein interner Link, der Linkjuice an die Zielseite weitergibt. Verlinke gezielt die Seiten, die für dich am wichtigsten sind.
- Konsistenz über alle Seiten: Das Hauptmenü sollte auf jeder Seite identisch sein. Wechselnde Menüstrukturen verwirren sowohl Nutzer als auch Crawler.
- Sprechende Ankertexte: Statt generischer Begriffe wie „Übersicht” lieber konkrete Bezeichnungen verwenden, die das Keyword der Zielseite enthalten.
Häufige Fehler bei der Umsetzung
In der Praxis sieht man immer wieder dieselben Probleme bei Dropdown-Menüs:
- Zu viele Ebenen: Dropdown innerhalb eines Dropdowns innerhalb eines Dropdowns – sogenannte Flyout-Menüs mit drei oder mehr Ebenen sind auf dem Desktop schwer zu bedienen und auf Mobilgeräten praktisch unbenutzbar. Zwei Ebenen sind das Maximum.
- Kein mobiles Konzept: Ein Hover-basiertes Dropdown funktioniert auf Smartphones nicht. Ohne eine durchdachte mobile Alternative (z. B. ein Akkordeon- oder Hamburger-Menü) verlierst du einen Großteil deiner Besucher.
- Dropdown überdeckt wichtige Inhalte: Wenn das aufgeklappte Menü andere interaktive Elemente verdeckt und sich nicht zuverlässig wieder schließt, frustriert das Nutzer. Teste das Verhalten auf verschiedenen Bildschirmgrößen.
- Fehlende Barrierefreiheit: Dropdown-Menüs müssen auch per Tastatur bedienbar sein. Nutzer, die mit der Tab-Taste navigieren, sollten das Dropdown öffnen, durch die Einträge navigieren und es wieder schließen können. Dafür braucht es korrekte ARIA-Attribute und Fokus-Management.
- Überladene Menüs: Wer jede einzelne Unterseite ins Dropdown packt, erreicht das Gegenteil von guter Nutzerführung. Ein Menü ist kein Sitemap-Ersatz – zeige nur die wichtigsten Kategorien und lass Nutzer sich über die Zielseiten weiter orientieren.