Hamburger-Menü ist ein weit verbreitetes Navigationselement im Webdesign, bestehend aus einem Icon mit drei horizontalen Linien (☰). Beim Klick oder Tap öffnet sich ein verstecktes Navigationsmenü – auf mobilen Geräten typischerweise als Vollbild- oder Seitenleisten-Overlay.
Geschichte des Hamburger-Icons
Das Hamburger-Icon wurde 1981 von Norm Cox für das Xerox Star-System entworfen. Es sollte eine Liste von Menüpunkten symbolisieren. Der große Durchbruch kam mit dem Aufstieg mobiler Websites ab 2009, als Bildschirmplatz zum kostbaren Gut wurde.
Heute ist das Hamburger-Icon ein universell verstandenes Symbol – nahezu jeder Smartphone-Nutzer weiß, dass sich dahinter ein Menü verbirgt.
Funktionsweise
Beim Tap auf das Hamburger-Icon öffnet sich eine Navigation, die verschiedene Formen annehmen kann:
- Vollbild-Overlay: Das Menü überlagert den gesamten Bildschirm
- Sidebar/Drawer: Das Menü gleitet von der Seite herein
- Dropdown: Das Menü klappt unter dem Header auf
Moderne Implementierungen nutzen Microinteractions für die Animation: Das Icon morpht beispielsweise zu einem X-Symbol, während das Menü eingeblendet wird.
Vorteile des Hamburger-Menüs
- Platzersparnis: Die gesamte Navigation verschwindet hinter einem kleinen Icon
- Aufgeräumtes Design: Mehr Platz für Inhalte, besonders auf Mobilgeräten
- Universelles Verständnis: Das Symbol wird weltweit erkannt
- Flexibilität: Kann beliebig viele Menüpunkte aufnehmen
Kritik und Nachteile
Versteckte Navigation
Der größte Kritikpunkt: Was nicht sichtbar ist, wird seltener genutzt. Studien zeigen, dass sichtbare Navigationselemente die Nutzung um bis zu 50% steigern können.
Zusätzliche Interaktion
Nutzer müssen erst klicken, um die Navigation zu sehen – ein zusätzlicher Schritt, der die User Experience beeinträchtigen kann.
Barrierefreiheit
Hamburger-Menüs müssen für Barrierefreiheit korrekt implementiert werden: ARIA-Labels, Tastaturnavigation und Fokus-Management sind essenziell.
Alternativen zum Hamburger-Menü
- Tab Bar: Sichtbare Icons am unteren Bildschirmrand (besonders bei Apps)
- Priority Navigation: Wichtige Links sichtbar, Rest im Overflow-Menü
- Mega Menu: Umfangreiche Dropdown-Menüs für Desktop-Navigation
- Scrollable Tabs: Horizontal scrollbare Navigationspunkte
Best Practices
Für Responsive Design empfiehlt sich ein hybrider Ansatz: Auf Desktop eine vollständig sichtbare Navigation, auf Tablet eine komprimierte Version, und auf Smartphones das Hamburger-Menü. Die Animation sollte flüssig sein (300ms) und der User Flow klar strukturiert.
Das Hamburger-Menü bleibt für mobiles UI Design ein bewährter Standard – aber es sollte bewusst eingesetzt und gut implementiert werden.