Dropdown-Menü auf Websites: Wann es sinnvoll ist und wie es richtig funktioniert

Dropdown-Menü auf Websites: Wann es sinnvoll ist und wie es richtig funktioniert

Ein Dropdown-Menü zeigt zusätzliche Navigationspunkte erst dann an, wenn ein übergeordneter Menüpunkt geöffnet wird. Bei Websites wird es häufig eingesetzt, um Leistungen, Kategorien oder Unterseiten übersichtlich zu gruppieren.

Ein Dropdown ist aber nur dann hilfreich, wenn es mit Maus, Tastatur und Touch zuverlässig bedienbar ist. Schlechte Dropdowns verstecken wichtige Inhalte, schließen zu schnell oder funktionieren nur bei Hover – und werden damit zum UX- und Accessibility-Problem.

Dropdown, Fly-out und Mega-Menü: Was ist der Unterschied?

• Dropdown: Untermenü öffnet sich typischerweise nach unten.
• Fly-out: weitere Ebenen öffnen sich seitlich.
• Mega-Menü: großes Panel mit mehreren Spalten, Gruppen und gegebenenfalls Bildern oder Zusatzinformationen.

Welche Variante sinnvoll ist, hängt von Umfang und Hierarchie der Website ab.

Wann ist ein Dropdown-Menü sinnvoll?

Dropdowns eignen sich besonders, wenn ein Hauptmenüpunkt mehrere klar zusammengehörige Unterseiten besitzt.

Beispiel:

• Leistungen
  • SEO
  • Local SEO
  • Google Ads
  • Webdesign

Der Nutzer erkennt einen Hauptbereich und kann bei Bedarf tiefer einsteigen.

Wann ist ein Dropdown keine gute Lösung?

• wenn es nur einen einzigen Unterpunkt gibt,
• wenn drei oder vier Navigationsebenen verschachtelt werden,
• wenn wichtige Seiten ausschließlich über Hover erreichbar sind,
• wenn das Menü auf Mobilgeräten unkontrollierbar wird,
• wenn Nutzer nicht erkennen, dass ein Untermenü existiert,
• wenn die Informationsarchitektur eigentlich vereinfacht werden müsste.

Dropdowns müssen mit Tastatur funktionieren

Die Web Accessibility Initiative (WAI) des W3C betont, dass Fly-out-/Dropdown-Menüs mit Maus und Tastatur bedienbar sein müssen. Nutzer sollten Untermenüs öffnen, erreichen und wieder verlassen können, ohne auf eine Maus angewiesen zu sein.

Wichtig sind unter anderem:

• sichtbarer Tastaturfokus,
• logische Focus-Reihenfolge,
• steuerbarer Öffnen-/Schließen-Zustand,
• keine Tastaturfalle,
• Unterseiten auch auf anderem Weg erreichbar.

Nur Hover ist problematisch

Ein Menü, das ausschließlich beim Darüberfahren mit der Maus erscheint, ist auf Touchgeräten und für Tastaturnutzer problematisch. Auch Nutzer mit eingeschränkter Feinmotorik können Schwierigkeiten haben, wenn Untermenüs sofort wieder verschwinden.

W3C empfiehlt für Fly-out-Menüs unter anderem, das Schließen nicht so empfindlich zu gestalten und alternative Wege zu den Unterseiten bereitzustellen.

Touch und Smartphone

Auf Smartphones gibt es keinen klassischen Hover-Zustand. Ein mobiler Menüpunkt mit Untermenü benötigt daher eine eindeutige Touch-Interaktion.

Gute mobile Navigation:

• zeigt sichtbar, welche Punkte Untermenüs besitzen,
• bietet ausreichend große Touch-Ziele,
• trennt gegebenenfalls Link und Aufklappfunktion,
• lässt Untermenüs wieder schließen,
• vermeidet horizontales Abschneiden.

Soll der Hauptmenüpunkt selbst klickbar sein?

Das hängt vom Konzept ab. Ein Punkt „Leistungen“ kann sowohl auf eine Übersichtsseite führen als auch Unterpunkte besitzen. Wichtig ist, dass Nutzer nicht raten müssen, ob ein Klick die Seite öffnet oder nur das Menü aufklappt.

Eine robuste Lösung kann einen echten Link zur Übersichtsseite mit einem getrennten, klar beschrifteten Toggle für das Untermenü kombinieren.

Wie erkennt ein Screenreader ein Untermenü?

Untermenüs sollten semantisch korrekt ausgezeichnet sein. Zustände wie geöffnet/geschlossen können mit passenden ARIA-Attributen kommuniziert werden. Das W3C zeigt beispielsweise den Einsatz von aria-expanded für Fly-out-Navigation.

ARIA ersetzt aber keine funktionierende HTML-Struktur oder Tastatursteuerung.

Navigation oder Anwendungsmenü?

Bei normalen Website-Navigationen sollte nicht automatisch das komplette ARIA-„menu/menubar“-Muster einer Desktop-Anwendung kopiert werden. Web-Anwendungsmuster besitzen eigene, deutlich komplexere Tastaturregeln.

Für eine klassische Website ist eine saubere Navigation mit Listen, Links, Buttons/Toggles und verständlichen Zuständen häufig die robustere Lösung.

Dropdown-Menüs und Google Crawling

Google kann Links am zuverlässigsten crawlen, wenn sie als echte <a href="…">-Links ausgegeben werden. Eine URL, die nur über einen JavaScript-Klickhandler ohne echtes href erreichbar ist, ist keine gute Navigationsgrundlage.

Wichtige Unterseiten sollten daher in der HTML-Navigation bzw. über andere crawlbare interne Links erreichbar sein.

Muss jede Unterseite im Dropdown stehen?

Nein. Das Hauptmenü sollte nicht den kompletten Sitemap-Bestand abbilden. Große Ratgeberbereiche können über Kategorie-/Hub-Seiten und kontextuelle Links erschlossen werden.

Wie diese Struktur insgesamt aufgebaut wird, erklärt unser Artikel Aufbau einer Website.

Wie viele Ebenen sind sinnvoll?

Je mehr Ebenen ein Fly-out besitzt, desto schwieriger werden Bedienung und Orientierung. Es gibt keine starre Maximalzahl, aber in vielen Unternehmenswebsites ist eine klare Hauptnavigation mit einer Unterebene ausreichend.

Wenn drei oder vier verschachtelte Ebenen nötig scheinen, sollte geprüft werden, ob Kategorien, Hub-Seiten oder ein Mega-Menü die Struktur besser abbilden.

Mega-Menü statt klassischem Dropdown?

Mega-Menüs können sinnvoll sein, wenn ein großer Bereich viele gleichwertige Unterkategorien hat. Vorteile:

• mehrere Gruppen gleichzeitig sichtbar,
• weniger tiefe Fly-out-Ebenen,
• Zusatzbeschreibungen möglich.

Nachteile:

• hoher Platzbedarf,
• auf Mobilgeräten komplex,
• Accessibility muss sorgfältig umgesetzt werden,
• kann Nutzer mit zu vielen Optionen überfordern.

Dropdown und Conversion

Eine Navigation sollte Nutzer nicht nur technisch zu Seiten bringen, sondern die wichtigsten Wege priorisieren. Für eine Agentur kann beispielsweise „SEO“, „Local SEO“ und „Google Ads“ hilfreicher sein als interne Fachbegriffe, die ein Kunde nicht kennt.

Ein CTA wie „Termin“ oder „Kontakt“ sollte nicht tief in einem Dropdown versteckt sein, wenn er ein zentraler Nutzerweg ist.

Dropdown und mobile Performance

Ein Menü benötigt normalerweise keinen schweren Framework- oder Widget-Stack. Große JavaScript-Bibliotheken, Iconfonts oder externe Ressourcen nur für die Navigation können unnötig Performance kosten.

Gerade Pagebuilder-Menüs sollten nach Updates auf Funktion, Icons, Responsive Verhalten und JavaScript-Fehler geprüft werden.

Häufige Dropdown-Fehler

• öffnet nur bei Hover,
• schließt beim kleinsten Mausversatz,
• kein sichtbarer Fokus,
• Untermenü nicht per Tastatur erreichbar,
• auf Mobilgeräten gleichzeitig Link und Toggle ohne klare Logik,
• zu kleine Touchflächen,
• Menü liegt hinter anderen Elementen,
• mehrere Ebenen gehen außerhalb des Viewports auf,
• Unterlinks sind keine echten href-Links,
• Menüzustand wird für Screenreader nicht kommuniziert.

Was sollte ein Navigation-/Dropdown-Checker prüfen?

Ein technischer Checker könnte eine Website in mehreren Viewports öffnen und unter anderem prüfen:

• Hauptnavigation vorhanden,
• Untermenüs erkannt,
• echte crawlbare Links mit href,
• Keyboard-Tab-Reihenfolge,
• sichtbarer Fokus,
• aria-expanded / Zustandskommunikation,
• Touch-Zielgrößen,
• Overflow außerhalb des Viewports,
• Untermenü auf Smartphone bedienbar,
• 404-/Redirect-Ziele im Menü,
• gleiche wichtige Links auf Mobil und Desktop,
• Kontrast und Lesbarkeit.

Besonders wertvoll wäre eine visuelle Testausgabe: Desktop- und Mobile-Screenshot mit markierten Menüpunkten, die technisch oder ergonomisch problematisch sind.

Checkliste für ein gutes Dropdown-Menü

1. nur verwenden, wenn echte Unterhierarchie existiert.
2. Untermenü sichtbar kennzeichnen.
3. Maus, Tastatur und Touch testen.
4. sichtbaren Fokus sicherstellen.
5. echte href-Links verwenden.
6. nicht zu viele Ebenen verschachteln.
7. mobile Darstellung separat testen.
8. alternative Wege zu Unterseiten anbieten.
9. nach Theme-/Plugin-Updates erneut prüfen.

Fazit

Ein Dropdown-Menü ist kein Platzspartrick, sondern ein Navigationselement für echte Hierarchien. Es ist nur dann gut, wenn Nutzer mit Maus, Tastatur und Touch zuverlässig zu allen wichtigen Unterseiten gelangen.

W3C empfiehlt für Fly-out-Menüs eine robuste Bedienbarkeit und alternative Zugangswege. Für Google sollten Navigationsziele als echte crawlbare Links ausgegeben werden. Gute Navigation verbindet damit UX, Accessibility und technische Auffindbarkeit.

Weitere Grundlagen findest du unter Navigation auf der Website.

Grundlagen: W3C Web Accessibility Initiative Menus/Fly-out Menus sowie Google Search Central Link Best Practices.