Hamburger-Menü

TL;DR

Das Hamburger-Menü versteckt Navigation hinter drei horizontalen Linien. Es spart Platz, reduziert aber Entdeckbarkeit.

Was ist ein Hamburger-Menü?

Das Hamburger-Menü (benannt nach den drei horizontalen Linien ≡, die an ein Brötchen erinnern) ist ein Icon, das Navigation versteckt. Ein Klick öffnet ein Menü – meist als Sidebar oder Overlay.

Wann Hamburger-Menü verwenden

• Mobile Geräte mit wenig Platz
• Sekundäre Navigation
• Komplexe Navigationsstrukturen
• Wenn Hauptcontent Priorität hat

Probleme des Hamburger-Menüs

• Versteckte Navigation wird seltener genutzt
• "Out of sight, out of mind"
• Zusätzlicher Klick nötig
• Nicht alle Nutzer kennen das Symbol

Alternativen

• Tab Bar am unteren Bildschirmrand
• Sichtbare Top-Navigation mit "Mehr"
• Priority+ Pattern: Wichtigstes sichtbar, Rest in "…"

Best Practices

• Ergänzendes Label "Menü" erhöht Klarheit
• Animation beim Öffnen/Schließen
• Fokus-Management für Barrierefreiheit
• Auf Desktop andere Lösung überlegen

Hamburger-Menü und Nachhaltigkeit

Versteckte Navigation kann nachhaltig sein:

• Weniger DOM-Elemente initial sichtbar
• Fokus auf Hauptcontent
• Aber: Mehr Klicks wenn Navigation häufig gebraucht wird

Fazit

Das Hamburger-Menü ist ein Kompromiss. Auf kleinen Bildschirmen oft unumgänglich, sollte es auf größeren Geräten durch sichtbare Navigation ersetzt werden.