Passende Aufgaben und Voraussetzungen
Diese Darstellung kann bei begrenzter Bildschirmbreite Platz schaffen. Besucher müssen den Zugang erkennen, die Auswahl verstehen und das Menü auch wieder verlassen können.
UX & Design · SQUAREMOON Glossar
Burger-Menü verständlich erklärt
Kompakt über ein Bedienelement erreichbare Navigation
Ein Burger-Menü bezeichnet eine Navigation, die über ein kompaktes Bedienelement geöffnet wird, häufig mit drei horizontalen Linien als Symbol. Die eigentlichen Navigationslinks erscheinen erst nach dem Öffnen.1, 2
Beispiel und Anwendung lesenAm Beispiel erklärt
Die Leistungsgruppe bleibt mobil erkennbar
Fiktives Beispiel zur Veranschaulichung
Eine fiktive Website zeigt auf dem Desktop drei Leistungsgruppen. Im mobilen Menü erscheinen dieselben Gruppen untereinander mit eingerückten Links. Die aktuelle Seite ist hervorgehoben und der Kontakt bleibt erreichbar.
So funktioniert es in der Praxis
Was muss nach dem Öffnen bedienbar bleiben?
Benennen Sie das Bedienelement verständlich und bilden Sie seinen geöffneten Zustand programmatisch ab. Stellen Sie Gruppen, Links und aktuelle Seite nachvollziehbar dar. Prüfen Sie Öffnen, Schliessen, Fokus, Tastaturbedienung und Erreichbarkeit bei vergrössertem Text.
Begriffe auseinanderhalten
Ist ein Burger-Menü ein Mega-Menü?
Das Burger-Menü beschreibt den kompakten Zugang zu einer Navigation. Ein Mega-Menü beschreibt eine grossflächig gruppierte Auswahl. Eine Website kann auf unterschiedlichen Ansichten verschiedene Darstellungen derselben Inhaltsstruktur verwenden.
Einsatz, Nutzen und Grenzen
Wann ist Burger-Menü für Unternehmen relevant?
Welcher Nutzen entstehen kann
Eine kompakte Darstellung erlaubt eine gegliederte Auswahl auf schmalen Ansichten. Klare Gruppen und verständliche Einrückungen können Beziehungen sichtbar machen. Das Öffnen ist dabei ein zusätzlicher Bedienungsschritt.
Passende SQUAREMOON Leistung
Leistung ansehen Mobile Navigation verständlich umsetzen
Vertiefen Sie das Thema auf unserer Leistungsseite.
Quellen und fachliche Grundlagen
Weiterführende Originalquellen
Diese Quellen vertiefen die fachlichen Grundlagen. Das Beispiel und die praktische Einordnung sind eigenständige Erläuterungen von SQUAREMOON, keine dokumentierten Kundenprojekte.
- Menus TutorialW3C WAI
- Das HTML-NavigationselementMDN Web Docs