Was ein Dropdown-Menü wirklich löst — und was nicht
Ein Dropdown-Menü ist ein Versprechen: viel Struktur auf wenig Fläche. Es klappt bei Bedarf auf und hält die Navigation aufgeräumt.
Dieses Versprechen hält es nur unter Bedingungen. Eine Seite mit vielen Bereichen ordnet ein Dropdown und führt schneller zum Ziel. Auf einer kleinen Seite versteckt es Links, die besser sichtbar blieben.
Dieser Artikel ordnet Dropdown-Menüs strategisch ein: wann sie die Navigation stärken und wann sie ihr schaden. Dazu kommt der oft unterschätzte Unterschied zwischen Desktop und Touchscreen — und wie ein Dropdown-Menü in HTML barrierefrei entsteht. Für eine Einordnung auf die eigene Seite lohnt sich ein kurzes Gespräch zur passenden Lösung.
Eine kleine Praxis-Website versteckte ihre fünf Seiten hinter einem einzigen Dropdown. Auf dem Handy tippte kaum jemand darauf — die wichtigsten Angebote blieben ungesehen. Fünf sichtbare Links hätten mehr erreicht als ein aufgeräumtes Menü.
Wann Dropdowns führen — und wann sie verlieren
Die ehrliche Faustregel: Ein Dropdown lohnt sich, wenn eine Seite mehr Bereiche hat, als in eine Zeile passen. Erst dann ordnet das Aufklappen, statt zu verstecken.
Hat eine Seite nur vier oder fünf Bereiche, verliert das Dropdown. Es fügt einen Klick hinzu, wo ein sichtbarer Link gereicht hätte. Was aufgeräumt wirkt, kostet Besucher einen Schritt zum Ziel.
Die Devise ist einfach: Dropdowns dort einsetzen, wo sie Ordnung schaffen — nicht dort, wo sie Klicks erzeugen.
Ein Dropdown führt, wenn …
Ein Dropdown verliert, wenn …
Desktop gegen Touchscreen: das unterschätzte Problem
Am Desktop öffnet ein Dropdown beim Überfahren mit der Maus. Dieses Hover kennt ein Touchscreen nicht. Auf dem Handy wird der erste Tipp zur Frage: öffnet er das Menü oder folgt er dem Link?
Viele Menüs lösen das schlecht. Ein Tipp springt sofort auf die Elternseite, das Untermenü bleibt unerreichbar. Oder das Dropdown öffnet und verdeckt den halben Bildschirm.
Ein gutes Menü plant beide Welten von Anfang an. Am Desktop führt der Hover, auf dem Touchscreen ein bewusster Tipp mit klarem Zustand. Dieser Unterschied entscheidet, ob die Navigation auf dem Handy trägt.
| Desktop (Maus) | Touchscreen (Handy) | |
|---|---|---|
| Öffnen | Hover — öffnet beim Überfahren | Tipp — braucht eine bewusste Aktion |
| Erster Klick oder Tipp | Klick folgt direkt dem Link | Tipp muss erst das Menü öffnen |
| Verfügbarer Platz | genug Raum für breite Menüs | Menü verdeckt schnell den Inhalt |
| Typische Falle | zu viele verschachtelte Ebenen | Elternlink öffnet statt Untermenü |
Faustregel: Was am Desktop funktioniert, gehört auf dem Touchscreen separat getestet.
Ein verbreiteter Fehler: Das Desktop-Menü wird einfach aufs Handy übernommen. Der Elternlink reagiert auf den ersten Tipp, das Untermenü öffnet nie. Wichtige Unterseiten bleiben auf dem Smartphone unsichtbar — obwohl sie am Desktop einwandfrei funktionieren.
Dropdown-Menü in HTML: sauber und barrierefrei
Ein Dropdown-Menü ist mehr als ein Aufklapp-Effekt. Damit es allen offensteht, muss es mit der Tastatur bedienbar sein, den Fokus sichtbar führen und seinen Zustand ansagen.
Die Grundlage ist sauberes HTML: ein Button, der das Menü öffnet, eine Liste als Inhalt und ARIA-Attribute, die Screenreadern den Zustand mitteilen. aria-expanded zeigt, ob das Menü offen ist. Die Escape-Taste schliesst es wieder.
Barrierefreiheit ist dabei keine Kür. Für viele Schweizer Organisationen ist sie Pflicht — und genau der Teil, den fertige Baukästen am häufigsten übergehen.
<!-- Barrierefreies Dropdown: Button steuert die Liste -->
<nav class="hauptmenue">
<button aria-expanded="false" aria-controls="untermenue-leistungen">
Leistungen
</button>
<ul id="untermenue-leistungen" hidden>
<li><a href="/webdesign">Webdesign</a></li>
<li><a href="/beratung">Beratung</a></li>
<li><a href="/seo">SEO</a></li>
</ul>
</nav>
<!-- JavaScript setzt aria-expanded und blendet die Liste ein/aus,
Escape schliesst das Menü, der Fokus bleibt sichtbar. -->Mega-Menü oder fokussiertes Dropdown?
Je grösser eine Seite, desto verlockender wirkt das Mega-Menü — ein grosses Panel mit allen Bereichen auf einen Blick. Für Shops mit Hunderten Kategorien ergibt es Sinn.
Für die meisten KMU-Seiten wird es zu komplex. Es braucht Pflege, gutes Design und viel Platz — und überfordert Besucher oft mehr, als es hilft. Ein fokussiertes Dropdown mit wenigen, klaren Punkten führt schneller.
Für noevu.ch stand dieselbe Frage an: Mega-Menü im Launcher-Stil oder fokussiertes Dropdown. Die Entscheidung fiel bewusst gegen das Mega-Menü — zu komplex für den Nutzen. Stattdessen führen wenige, klar benannte Dropdowns die Besucher schneller ans Ziel. Die Regel dahinter gilt für fast jede KMU-Seite: erst die Struktur klären, dann die Navigation wählen — nicht umgekehrt.
Wie Noevu Navigation in der Praxis löst
Auf noevu.ch bleibt die Navigation bewusst schlank und nutzerzentriert. Wenige Hauptpunkte stehen sichtbar in der Zeile, ein Dropdown öffnet nur dort, wo mehrere verwandte Seiten zusammengehören.
Jedes Dropdown ist mit der Tastatur bedienbar, zeigt den Fokus deutlich und sagt seinen Zustand an. Auf dem Handy wird aus dem Hover ein bewusster Tipp — der Elternlink löst nichts versehentlich aus.
Die Leitfrage bleibt immer dieselbe: Findet ein Besucher schneller, was er sucht? Wenn ein sichtbarer Link das besser macht, ersetzt er das Dropdown.
Was Noevu bei der Navigation beachtet
Fazit
Ein Dropdown-Menü ist ein Werkzeug, kein Standard. Auf grösseren Seiten ordnet es das Angebot und führt schneller zum Ziel. Auf kleinen Seiten gewinnt meist die sichtbare Navigation.
Entscheidend sind zwei Dinge: die Grösse der Seite und die Sorgfalt in der Umsetzung. Ein Dropdown, das nur am Desktop funktioniert oder die Tastatur ignoriert, kostet mehr, als es spart.
Die Devise bleibt einfach: Dropdowns dort einsetzen, wo sie Ordnung schaffen — mit voller Barrierefreiheit und einem klaren Blick auf den Touchscreen.
Quellen
- Mega Menus Work Well for Site NavigationNielsen Norman Group
- Menu Design: 15 UX GuidelinesNielsen Norman Group
- Menu Button Pattern (WAI-ARIA)W3C WAI-ARIA Authoring Practices
Ob ein Dropdown zur Seite passt und wie Struktur, Barrierefreiheit und Touch zusammenspielen, lässt sich in zwanzig Minuten ehrlich klären.
Häufig gestellte Fragen
Wann ist ein Dropdown-Menü sinnvoll?
Ein Dropdown lohnt sich vor allem bei grösseren Seiten mit vielen Bereichen, die sich klar gruppieren lassen. Es hält die Navigation aufgeräumt und führt Besucher gezielt zu verwandten Unterseiten. Bei kleinen Seiten mit nur vier oder fünf Bereichen führt eine sichtbare Navigation meist schneller ans Ziel.
Wie baue ich ein Dropdown-Menü in HTML?
Die Grundlage ist ein Button, der das Untermenü öffnet, und eine Liste mit den Links. Wichtig sind ARIA-Attribute wie aria-expanded, die den Zustand an Screenreader melden, dazu volle Tastaturbedienung mit sichtbarem Fokus und Schliessen über die Escape-Taste. So entsteht ein Dropdown, das allen offensteht.
Sind Dropdown-Menüs schlecht für die Usability?
Nicht grundsätzlich. Schlecht wird es, wenn ein Dropdown Inhalte hinter einem unnötigen Klick versteckt oder auf dem Handy schwer zu treffen ist. Gut gesetzt — bei passender Seitengrösse und sauberer Umsetzung — beschleunigt es die Navigation, statt sie zu bremsen.
Funktionieren Dropdown-Menüs auf dem Smartphone?
Nur mit bewusster Planung. Ein Touchscreen kennt kein Hover, deshalb muss der erste Tipp das Menü öffnen, ohne gleich dem Elternlink zu folgen. Ohne diese Trennung wird das Untermenü auf dem Handy unerreichbar. Beide Welten gehören von Anfang an getestet.
Mega-Menü oder einfaches Dropdown — was ist besser?
Das hängt von der Grösse ab. Ein Mega-Menü lohnt sich bei Shops mit sehr vielen Kategorien. Für die meisten KMU-Seiten wird es zu komplex und aufwendig in der Pflege. Ein fokussiertes Dropdown mit wenigen, klaren Punkten führt dort schneller und bleibt einfacher wartbar.
