--- title: "Hamburger-Menü" url: "https://insideuxdesign.com/de/glossar/hamburger-menue" language: "de" description: "Was ist ein Hamburger-Menü? Herkunft, Studienlage und Praxistipps einfach erklärt. Lies, wann die drei Striche helfen und wann sie Inhalte verstecken." published: "2026-10-14T15:20:27+02:00" updated: "2026-10-14T15:20:27+02:00" --- # Hamburger-Menü Das Hamburger-Menü ist ein Symbol aus drei waagerechten Strichen, hinter dem sich die Navigation einer Website oder App verbirgt. Es spart Platz, macht Inhalte aber schwerer auffindbar. - **Buchstabe:** H - **Englischer Begriff:** Hamburger Menu UX-Glossar · engl. Hamburger Menu # Hamburger-Menü Das Hamburger-Menü ist ein Symbol aus drei waagerechten Strichen, hinter dem sich die Navigation einer Website oder App verbirgt. Es spart Platz, macht Inhalte aber schwerer auffindbar. Stell dir vor, du öffnest auf dem Smartphone die Website eines Fahrradladens und suchst die Öffnungszeiten. Auf dem Bildschirm siehst du ein Logo, ein großes Foto und oben rechts drei waagerechte Striche. Ob sich dahinter die Öffnungszeiten verstecken, weißt du erst, wenn du draufgetippt hast. Diese drei Striche sind das Hamburger-Menü. ## Einfach erklärt Das Hamburger-Menü ist ein Symbol aus drei übereinanderliegenden Linien, hinter dem sich die Navigation einer Website oder App verbirgt. Seinen Namen hat es, weil die Striche an Brötchen, Patty und Brötchen erinnern. Ein Vergleich aus dem Alltag: Es funktioniert wie eine Schublade. Der Inhalt ist ordentlich verstaut, aber du musst wissen oder ahnen, dass es die Schublade gibt, und sie aufziehen. Das Symbol ist älter, als viele denken. Der Designer Norm Cox entwarf es für die Oberfläche des Xerox Star, einer Arbeitsstation, die 1981 auf den Markt kam. Dort öffnete es eine Liste mit weiteren Befehlen. Auf Smartphones verbreitete es sich etwa ab 2009, weil auf kleinen Bildschirmen wenig Platz für eine sichtbare Navigation ist. ## Was die Forschung zeigt Der Vorteil liegt auf der Hand: Das Menü spart Platz. Der Nachteil ist ebenso klar: Was nicht sichtbar ist, wird seltener genutzt. Die Nielsen Norman Group hat 2016 untersucht, wie Menschen mit versteckter Navigation umgehen. Auf dem Desktop nutzten Testpersonen eine versteckte Navigation in 27 Prozent der Fälle, eine sichtbare in 48 Prozent. Auf Smartphones war der Unterschied kleiner, aber vorhanden: 57 Prozent bei versteckter Navigation gegenüber 86 Prozent bei einer Kombination aus sichtbaren und versteckten Einträgen. Aufgaben dauerten mit versteckter Navigation zudem länger und wurden als schwieriger empfunden. Das heißt nicht, dass das Hamburger-Menü grundsätzlich falsch ist. Es heißt: Die wichtigsten Wege sollten nicht ausschließlich darin stecken. Mehr dazu im Artikel [Die 4 meistgestellten Fragen zum Burger-Menü](https://insideuxdesign.com/de/blog/die-4-meistgestellten-fragen-zum-burger-menue). ## Ein Beispiel Zurück zum Fahrradladen. Vorher stecken alle Seiten im Hamburger-Menü, auch Öffnungszeiten und Werkstatttermin, die beiden häufigsten Anliegen. Viele Menschen scrollen erfolglos und rufen dann an. Nachher stehen „Werkstatttermin“ und „Öffnungszeiten“ als sichtbare Links direkt unter dem Logo. Seltenere Seiten wie Jobs oder Impressum bleiben im Menü. Das Symbol bekommt zusätzlich die Beschriftung „Menü“, damit auch Menschen, die es nicht kennen, wissen, was sich dahinter verbirgt. ## In der Praxis - **Zeig das Wichtigste sichtbar.** Finde mit Daten oder [User Research](https://insideuxdesign.com/de/glossar/user-research) heraus, welche zwei bis vier Ziele am häufigsten sind, und stelle sie direkt dar. - **Beschrifte das Symbol.** Das Wort „Menü“ neben den drei Strichen kostet wenig Platz und nimmt Unsicherheit. Für [Screenreader](https://insideuxdesign.com/de/glossar/screenreader) braucht der Button zudem einen verständlichen Namen. - **Verzichte auf dem Desktop darauf.** Dort ist meist genug Platz für eine sichtbare Navigation, und der Nachteil versteckter Menüs fiel in der Studie dort am größten aus. ## Verwandte Begriffe [Informationsarchitektur](https://insideuxdesign.com/de/glossar/informationsarchitektur), [Progressive Disclosure](https://insideuxdesign.com/de/glossar/progressive-disclosure), [Affordance](https://insideuxdesign.com/de/glossar/affordance), [Mentales Modell](https://insideuxdesign.com/de/glossar/mentales-modell) ## Quellen - [Kara Pernice, Raluca Budiu: Hamburger Menus and Hidden Navigation Hurt UX Metrics. Nielsen Norman Group, 2016](https://www.nngroup.com/articles/hamburger-menus/) - [Dale Berning Sawa: An oral history of the hamburger icon from the people who were there. InVision, 2019](https://www.invisionapp.com/inside-design/an-oral-history-of-the-hamburger-icon-from-the-people-who-were-there) - [Wikipedia: Hamburger button. Wikipedia, abgerufen 2026](https://en.wikipedia.org/wiki/Hamburger_button) ## Weitere Begriffe [ ### A/B-Test Ein A/B-Test ist ein Experiment, bei dem zwei Varianten einer Seite oder eines Elements gleichzeitig an zufällig aufgeteilte Besuchende ausgespielt werden. So entscheidest du anhand echter Daten, welche Variante besser funktioniert. ](https://insideuxdesign.com/de/glossar/a-b-test) [ ### ARIA ARIA ist ein W3C-Standard, der HTML um Rollen, Zustände und Eigenschaften ergänzt. So erfahren Screenreader, was ein Element ist und wie es sich gerade verhält. ](https://insideuxdesign.com/de/glossar/aria) [ ### Affordance Eine Affordance beschreibt, welche Handlung ein Objekt möglich macht und ob Menschen das erkennen: Ein Button lädt zum Drücken ein, ein Griff zum Ziehen. ](https://insideuxdesign.com/de/glossar/affordance) [ ### Alternativtext Ein Alternativtext ist eine kurze Textfassung eines Bildes im HTML-Attribut alt. Screenreader lesen ihn vor, damit Menschen, die das Bild nicht sehen, dieselbe Information bekommen. ](https://insideuxdesign.com/de/glossar/alternativtext) [ ### Arbeitsgedächtnis Das Arbeitsgedächtnis hält Informationen für kurze Zeit fest, damit du mit ihnen arbeiten kannst. Es fasst nur wenig, deshalb sollten Interfaces möglichst wenig Merkarbeit verlangen. ](https://insideuxdesign.com/de/glossar/arbeitsgedaechtnis) [ ### Atomic Design Atomic Design ist eine Methode, Benutzeroberflächen aus kleinen, wiederverwendbaren Bausteinen aufzubauen: von einzelnen Elementen wie Buttons bis zu ganzen Seiten. ](https://insideuxdesign.com/de/glossar/atomic-design) [ ### BFSG Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet seit dem 28. Juni 2025 viele Unternehmen, bestimmte Produkte und digitale Dienstleistungen wie Onlineshops barrierefrei zu gestalten. ](https://insideuxdesign.com/de/glossar/bfsg) [ ### Barrierefreiheit Barrierefreiheit bedeutet, dass Websites, Apps und digitale Dokumente so gestaltet sind, dass alle Menschen sie nutzen können, auch mit einer Seh-, Hör-, motorischen oder kognitiven Behinderung. ](https://insideuxdesign.com/de/glossar/barrierefreiheit) [ ### Card Sorting Card Sorting ist eine Research-Methode, bei der Menschen Begriffe auf Karten in Gruppen sortieren. So siehst du, wie sie Inhalte gedanklich ordnen, und kannst eine verständliche Navigation planen. ](https://insideuxdesign.com/de/glossar/card-sorting) [ ### Cognitive Load Cognitive Load ist die geistige Anstrengung, die nötig ist, um eine Oberfläche zu verstehen und zu bedienen. Je weniger unnötige Denkarbeit ein Design verlangt, desto leichter fällt die eigentliche Aufgabe. ](https://insideuxdesign.com/de/glossar/cognitive-load) [ ### Contextual Inquiry Contextual Inquiry ist eine Research-Methode, bei der du Menschen in ihrem echten Arbeitsumfeld beobachtest und befragst. So siehst du, wie sie Aufgaben tatsächlich erledigen, nicht nur, wie sie davon erzählen. ](https://insideuxdesign.com/de/glossar/contextual-inquiry) [ ### Conversion Eine Conversion ist eine gewünschte Aktion auf einer Website oder in einer App, etwa ein Kauf oder eine Anmeldung. Die Conversion Rate zeigt, welcher Anteil der Besuche dazu führt. ](https://insideuxdesign.com/de/glossar/conversion)