Je umfangreicher eine Website ist, desto schwieriger lässt sich ihre Navigation in einer einzigen sichtbaren Ebene abbilden. Durch Mega- und Flyout-Menüs können zusätzliche Navigationsebenen bei Bedarf sichtbar gemacht werden und ermöglichen somit Zugriff auf tiefere Ebenen, ohne dass alle Optionen dauerhaft angezeigt werden müssen.
Beide Varianten verfolgen ein ähnliches Ziel, unterscheiden sich aber deutlich in der Darstellung. Ein Flyout-Menü erweitert einen Navigationspunkt um eine einspaltige oder hierarchisch verschachtelte Liste. Ein Mega-Menü öffnet eine große Fläche, auf der zahlreiche Navigationsziele gleichzeitig in Gruppen dargestellt werden. Diese werden über Layout und Typografie strukturiert und können bei Bedarf mit weiteren Inhalten befüllt werden, die unabhängig vom Navigationssystem existieren. Welche Variante sinnvoll ist, hängt von der Informationsarchitektur der Website ab.
Flyout- oder Mega-Menü?
Flyout-Menüs eignen sich besonders für überschaubare Strukturen und können die Seitenhierarchie einer Website innerhalb der Navigation sichtbar machen, wenn sie nicht zu tief ist. Je tiefer und breiter die Organisationsstruktur, desto schwieriger wird die Umsetzung von Flyout-Menüs. Nutzer*innen müssen dann durch mehrere Ebenen navigieren und können häufig nur einen kleinen Teil der Struktur überblicken.
Mega-Menüs verfolgen den Ansatz, zahlreiche Navigationselemente innerhalb einer großen Fläche abzubilden und sie somit direkt sichtbar zu machen. Mehrere Kategorien und Unterkategorien können somit übersichtlich dargestellt werden. Die typischen Merkmale eines Mega-Menüs sind:
- Eine große Fläche
- Klar erkennbare Gruppen
- Typografische Hierarchien
- Mehrere Navigationspunkte pro Gruppe
- Möglichst wenig Verschachtelung innerhalb eines geöffneten Menüs
Ein Mega-Menü bietet sich besonders an, wenn die Website viele Navigationselemente besitzt, die sinnvoll gruppiert werden können. So können Nutzer*innen einen großen Teil der Informationsarchitektur auf einmal überblicken. Flyout-Menüs bilden eine Hierarchie also schrittweise ab, Mega-Menüs machen hingegen einen großen Teil der Hierarchie gleichzeitig sichtbar.
Sichtbarkeit der Struktur
Die Stärke eines Mega-Menüs liegt darin, Strukturen sichtbar zu machen. Verwandte Inhalte sollten räumlich zusammengefasst und über Überschriften, Abstände und typografische Hierarchien sortiert und visuell voneinander getrennt werden. Durch diese visuelle Sortierung der Inhalte, können Nutzer*innen die Inhalte schneller als gruppierte Elemente erfassen. Bei der Umsetzung eines Mega-Menüs zeigt sich die Verbindung zwischen Informationsarchitektur, Labeling und Navigation: Ein Mega-Menü kann nur so verständlich sein wie die Struktur und Bezeichnungen, die es sichtbar macht.
Öffnen & schließen
Flyout- und Mega-Menüs müssen eindeutig sichtbar machen, welche Navigationspunkte Inhalte besitzen und wie diese geöffnet werden können. Das lässt sich in den meisten Fällen über ein ergänzendes Icon (beispielsweise ein Pfeil- oder ein Plus-Icon) lösen. Technisch lässt sich das über einen Button und aria-expanded umsetzen, wie wir bereits im Kapitel “Zustände & Interaktion” behandelt haben. Besondere Aufmerksamkeit benötigt ein Navigationspunkt, der gleichzeitig selbst ein Link ist und ein Untermenü öffnet. Dabei kann dieser in zwei unterschiedliche Elemente aufgeteilt werden:
<a href="/umsetzung/">Umsetzung</a>
<button
type="button"
aria-expanded="false"
aria-controls="submenu-umsetzung"
>
<span class="visually-hidden">
Untermenü öffnen
</span>
</button>In diesem Beispiel führt der Link zur Übersichtsseite und der Button ist für die Steuerung des Untermenüs zuständig. Besitzt der Navigationspunkt keinen Link, kann auch dieser die Funktionalität von Öffnen und Schließen steuern, wie es beispielsweise auf dieser Seite hier umgesetzt ist.
Hover oder Klick?
Desktop-Navigationen werden in den meisten Fällen per Hover geöffnet, was allerdings mehrere Probleme mit sich bringt. Ein Menü kann versehentlich geöffnet werden, wenn der Mauszeiger auf dem Weg zu einem anderen Ziel den Navigationspunkt kreuzt. Umgekehrt kann es zu früh verschwinden, wenn sich der Mauszeiger kurz außerhalb des geöffneten Menüs bewegt.
Für Mega-Menüs, deren Öffnen auf Hover basiert, empfiehlt es sich, das Öffnen und Schließen mit einer kurzen Zeitverzögerung umzusetzen. Laut NN/g ist für dieses Verhalten etwa eine halbe Sekunde als guter Richtwert zu empfehlen, um unbeabsichtigte Aktionen zu reduzieren. Auch bei Flyout-Menüs ist eine Verzögerung empfohlen.
Eine eindeutigere Variante ist eine Lösung per Klick oder mit einem Button, also das Öffnen und Schließen über eine bewusste Aktion. Im besten Fall ist Hover nicht die einzige Möglichkeit, ein Untermenü zu erreichen. Die Bedienung mit der Tastatur haben wir ausführlich im Kapitel “Tastatur & Fokus” behandelt.
Tiefe reduzieren
Flyout-Menüs können dazu verleiten, immer weitere Ebenen anzuhängen, was die Interaktion für die Nutzer*innen zunehmend erschwert. Kleine Bewegungen können ein falsches Menü öffnen und die aktuelle Position innerhalb der Hierarchie wird schwerer nachvollziehbar. Besonders bei einer umfangreichen Informationsarchitektur kann ein Mega-Menü daher sinnvoller sein als mehrere verschachtelte Flyout-Menüs. Es nutzt die verfügbare Fläche, um mehr Optionen gleichzeitig darzustellen und zusätzliche Interaktionen zu vermeiden.
Ein Mega-Menü sollte aber nicht zwangsläufig alle Inhalte der Website aufnehmen, sondern weiterhin als eine Navigation fungieren. Es sollte die Struktur sichtbar machen, aber nicht die gesamte Website in das Menü verlagern. Wenn eine Informationsarchitektur nur durch zahlreiche verschachtelte Menüs verständlich dargestellt werden kann, liegt das Problem möglicherweise an der zugrunde liegenden Struktur.
Alternative Wege
Besonders bei Flyout-Menüs sollte die Navigation nicht die einzige Möglichkeit sein, tiefer liegende Inhalte zu erreichen. Für Menschen mit eingeschränkter Feinmotorik können diese schwierig oder sogar unmöglich zu bedienen sein. Es sollten alternative Wege geschaffen werden, beispielsweise durch eine Übersichtsseite des jeweiligen übergeordneten Bereichs. Auf diese Weise kann die Robustheit der Navigation verstärkt werden, denn selbst wenn ein komplexes Flyout-Menü nicht genutzt werden kann, bleibt die Informationsarchitektur erreichbar.
Zusammenfassung
Flyout- und Mega-Menüs machen zusätzliche Ebenen einer Navigation bei Bedarf sichtbar. Flyout-Menüs eignen sich besonders für überschaubare Hierarchien, Mega-Menüs können umfangreiche Hierarchien auf einen Blick darstellen und gruppieren. Eine nachvollziehbare Struktur ist dabei entscheidend: Gruppen, Labels und visuelle Hierarchien sollten die Informationsarchitektur unterstützen.
Das Öffnen und Schließen muss eindeutig kontrollierbar sein und Zustände technisch kommuniziert werden. Hover sollte im besten Fall nicht die einzige Interaktionsmöglichkeit sein. Durch alternative Zugänge zu den Inhalten kann gewährleistet werden, dass die Navigation nicht vollständig von einem komplexen Interaktionsmuster abhängig ist.
Quellen
- Fly-out Menus. W3C Web Accessibility Initiative (WAI). Abgerufen am 14.09.2026.
- Example Disclosure Navigation Menu. W3C Web Accessibility Initiative (WAI). Abgerufen am 14.09.2026.
- Nielsen, Jakob; Li, Angie (26.03.2017). Mega Menus Work Well for Site Navigation. Nielsen Norman Group. Abgerufen am 14.09.2026.