Hamburger-Menü

Was ist ein Hamburger-Menü?

Ein Hamburger-Menü ist ein Bedienelement für Websites und Apps, das die Navigation platzsparend hinter einem Symbol mit meist drei waagerechten Linien verbirgt. Nach dem Anklicken oder Antippen öffnet sich eine Liste mit Navigationspunkten. Das Element wird vor allem auf Smartphones und bei begrenztem Platz eingesetzt.

Wie funktioniert ein Hamburger-Menü?

Das Hamburger-Menü fasst Navigationspunkte in einem ein- und ausklappbaren Bereich zusammen. Sein Name leitet sich von den drei übereinanderliegenden Linien des Symbols ab, die vereinfacht an die Schichten eines Hamburgers erinnern. Als alternative Bezeichnung ist deshalb auch der Begriff Burger-Menü gebräuchlich.

Beim Aktivieren öffnet sich die Navigation meist als seitlich eingeblendete Fläche, als Vollbildansicht oder als ausklappbare Liste. Eine erneute Betätigung des Symbols, ein Schließen-Button oder die Escape-Taste sollte das Menü wieder schließen. Auf mobilen Websites ersetzt es häufig die horizontal angeordnete Hauptnavigation der Desktop-Version.

Ein funktionsfähiges Hamburger-Menü besteht aus mehreren Elementen:

Ein klar erkennbarer Button öffnet und schließt die Navigation.
Eine Beschriftung oder ein zugänglicher Name erklärt die Funktion des Symbols.
Die enthaltenen Links führen zu den wichtigsten Bereichen der Website.
Der aktuelle Zustand des Menüs ist technisch und visuell erkennbar.
Die Navigation lässt sich per Touch, Maus und Tastatur bedienen.

Vorteile des Burger-Menüs

Ein Burger-Menü spart Platz und ermöglicht auch auf kleinen Bildschirmen eine umfangreiche Navigation. Inhalte, Suchfunktionen und zentrale Handlungsaufforderungen erhalten dadurch mehr sichtbare Fläche. Das Element eignet sich besonders für responsive Websites, deren Layout sich automatisch an unterschiedliche Bildschirmgrößen anpasst.

Die kompakte Darstellung hat jedoch einen Zielkonflikt: Verborgene Navigationspunkte werden häufig seltener wahrgenommen als dauerhaft sichtbare Links. Wichtige Ziele wie Produkte, Kontakt, Warenkorb oder Buchung sollten deshalb nicht ausschließlich in einer tiefen Menüstruktur liegen. Besonders relevante Aktionen können zusätzlich direkt im Seitenkopf erscheinen.

Ein gutes Hamburger-Menü reduziert die Navigation auf einen einzigen Auslöser, hält die wichtigsten Ziele aber schnell erreichbar. Die Qualität zeigt sich nicht an der Anzahl der Menüpunkte, sondern daran, ob Nutzer ihr gewünschtes Ziel ohne Umwege erkennen und aufrufen können.

Hamburger-Menü und Benutzerfreundlichkeit

Die Benutzerfreundlichkeit hängt vor allem von Erkennbarkeit, Position und Informationsarchitektur ab. Das Symbol sollte an einer erwartbaren Stelle im Seitenkopf stehen und sich optisch deutlich vom Hintergrund abheben. Eine ergänzende Beschriftung wie Menü verbessert die Verständlichkeit, weil nicht jeder Nutzer das Symbol sicher zuordnet.

Die Menüpunkte sollten nach der tatsächlichen Bedeutung für den Nutzer geordnet sein. Verständliche Begriffe wie Leistungen, Produkte, Preise oder Kontakt funktionieren besser als interne Abteilungsnamen und kreative Wortspiele. Bei umfangreichen Websites helfen klare Unterebenen, wobei zu viele verschachtelte Ebenen die Orientierung erschweren.

Für eine gute mobile Bedienung braucht das Menü ausreichend große Schaltflächen und genügend Abstand zwischen den Links. Nutzer müssen jeden Menüpunkt mit dem Finger sicher auswählen können, ohne versehentlich einen benachbarten Link zu öffnen. Eine systematische Prüfung von UX und Usability berücksichtigt deshalb auch verschiedene Displaygrößen und Eingabemethoden.

Barrierefreies Hamburger-Menü

Ein barrierefreies Hamburger-Menü muss ohne Maus bedienbar und für assistive Technologien verständlich sein. Der Auslöser sollte technisch als Button umgesetzt werden und einen zugänglichen Namen wie Menü öffnen besitzen. Das Attribut aria-expanded kann Screenreadern mitteilen, ob die Navigation gerade geöffnet oder geschlossen ist.

Nach dem Öffnen muss die Tastatursteuerung einer nachvollziehbaren Reihenfolge folgen. Ein sichtbarer Fokus zeigt, welches Element gerade ausgewählt ist. Wenn sich die Navigation als überlagernde Vollbildansicht öffnet, sollte der Fokus innerhalb dieses Bereichs bleiben und nach dem Schließen zum Menü-Button zurückkehren.

Auch Kontraste, Schriftgrößen und verständliche Linktexte gehören zur barrierefreien Navigation. Eine ausführlichere Übersicht bietet die Checkliste für barrierefreie Websites. Barrierefreiheit sollte bereits bei der Konzeption und Entwicklung einer Website berücksichtigt werden, da nachträgliche Korrekturen oft mehrere Komponenten betreffen.

Relevanz für SEO, SEA und GEO

Hamburger-Menü und SEO

Ein Hamburger-Menü ist grundsätzlich kein Nachteil für SEO, sofern die enthaltenen Links technisch als normale HTML-Links verfügbar sind. Suchmaschinen können auch Navigationselemente erfassen, die erst nach einer Nutzeraktion sichtbar werden. Problematisch wird die Umsetzung, wenn Ziele nur durch Skripte ohne eindeutige Linkadresse aufgerufen werden oder wichtige Seiten zu tief in der Struktur liegen.

Die Navigation verteilt interne Verlinkungen und hilft Suchmaschinen, Seiten sowie deren Beziehungen zu erkennen. Relevante Kategorien sollten daher mit beschreibenden Linktexten erreichbar sein. Die technischen Grundlagen der Suchmaschinenoptimierung umfassen neben einer crawlbaren Navigation auch Ladezeiten, Statuscodes und sauberen HTML-Code.

Auswirkungen auf SEA und GEO

Bei SEA beeinflusst das Hamburger-Menü die Nutzung einer Landingpage. Besucher aus Anzeigen müssen Angebot, Kontaktmöglichkeit oder Kaufprozess schnell erreichen können. Eine zu umfangreiche oder unklare Navigation kann vom Kampagnenziel ablenken, während ein übersichtliches Menü Orientierung bietet und weitere relevante Inhalte zugänglich macht.

Für GEO, also Generative Engine Optimization, ist das Hamburger-Menü kein direkter Faktor für die Nennung in KI-Antworten. Eine logisch aufgebaute Navigation unterstützt jedoch eine verständliche Website-Struktur und macht zentrale Inhalte intern auffindbar. Davon profitieren Suchmaschinen, Nutzer und Systeme, die öffentlich erreichbare Inhalte verarbeiten.

Abgrenzung zu anderen Menüs

Navigationselement	Typische Verwendung	Unterschied zum Hamburger-Menü
Horizontale Navigation	Desktop-Websites mit wenigen Hauptbereichen	Die Links sind dauerhaft sichtbar und benötigen mehr Platz.
Mega-Menü	Onlineshops und umfangreiche Portale	Es zeigt viele Kategorien gleichzeitig in einer großen Übersicht.
Tab-Leiste	Apps mit wenigen zentralen Bereichen	Die wichtigsten Ziele bleiben am unteren oder oberen Rand sichtbar.
Kebab-Menü	Zusätzliche Aktionen zu einem einzelnen Element	Das Symbol besteht meist aus drei Punkten und öffnet ein Kontextmenü.

Der Unterschied zwischen Hamburger-Menü und Mega-Menü liegt vor allem in der Sichtbarkeit und im Umfang. Das Hamburger-Menü verbirgt die Navigation zunächst hinter einem kompakten Symbol. Ein Mega-Menü stellt zahlreiche Bereiche nach dem Öffnen strukturiert in Spalten, Kategorien oder Gruppen dar.

Hamburger-Menü richtig umsetzen

Vor der Umsetzung sollte geklärt werden, welche Ziele Nutzer am häufigsten benötigen. Diese Ziele gehören nach oben und sollten möglichst mit einem oder zwei Schritten erreichbar sein. Weniger relevante Inhalte können in Untergruppen, den Footer oder eine ergänzende Servicenavigation verschoben werden.

Verwende einen echten Button zum Öffnen und Schließen.
Ergänze das Symbol bei Bedarf um die Beschriftung Menü.
Nutze eindeutige HTML-Links für alle Navigationsziele.
Teste Tastatursteuerung, Fokusführung und Screenreader-Ausgabe.
Prüfe die Navigation auf mehreren realen Bildschirmgrößen.
Messe Klicks auf Menüpunkte und Abbrüche im Nutzungspfad.

Ob eine mobile Navigation funktioniert, lässt sich mit Nutzertests und Webanalyse beurteilen. Aussagekräftige Kennzahlen sind die Klickrate einzelner Menüpunkte, die Nutzung der internen Suche, erreichte Zielseiten und abgeschlossene Conversions. Ein Vergleich vor und nach einer Änderung zeigt, ob die neue Struktur Nutzer schneller zum Ziel führt.

Wenn du Navigation, mobile Benutzerführung und technische SEO gemeinsam prüfen lassen möchtest, bietet ein Potenzialcheck eine erste Einordnung.

Kostenloser Potenzialcheck

Häufige Fragen zum Hamburger-Menü

Warum heißt es Hamburger-Menü?

Das Symbol besteht meist aus drei waagerechten Linien. Diese erinnern vereinfacht an die übereinanderliegenden Bestandteile eines Hamburgers, weshalb sich die Bezeichnung Hamburger-Menü etabliert hat.

Ist ein Hamburger-Menü veraltet?

Ein Hamburger-Menü ist weiterhin verbreitet und für kleine Bildschirme geeignet. Ob es sinnvoll ist, hängt von der Anzahl der Navigationspunkte, der Zielgruppe und der Bedeutung dauerhaft sichtbarer Funktionen ab.

Sollte das Wort Menü neben dem Symbol stehen?

Eine zusätzliche Beschriftung verbessert die Verständlichkeit, besonders bei Zielgruppen mit geringer Erfahrung im Umgang mit mobilen Oberflächen. Bei sehr vertrauten App-Strukturen kann ein eindeutig gestaltetes Symbol ausreichen.

Wo wird das Hamburger-Menü platziert?

Das Symbol befindet sich meistens links oder rechts im oberen Seitenbereich. Wichtig ist eine einheitliche Position auf allen Unterseiten, damit Nutzer die Navigation ohne erneute Suche öffnen können.

Kann ein Hamburger-Menü auch auf dem Desktop verwendet werden?

Ein Hamburger-Menü kann auf dem Desktop eingesetzt werden, wenn das Design besonders reduziert sein soll. Für Websites mit wenigen wichtigen Bereichen ist eine dauerhaft sichtbare Navigation häufig leichter erfassbar.

Schadet ein Hamburger-Menü der Suchmaschinenoptimierung?

Ein technisch sauber umgesetztes Hamburger-Menü schadet der Suchmaschinenoptimierung nicht. Die enthaltenen Ziele sollten als crawlbare HTML-Links verfügbar sein und wichtige Seiten dürfen nicht unnötig tief in der Navigation liegen.