--- title: "Hamburger Menu" url: "https://insideuxdesign.com/en/glossar/hamburger-menu" language: "en" description: "What is a hamburger menu? Its origin, the research and practical tips in plain language. Learn when the three lines help and when they hide your content." published: "2026-10-14T15:20:29+02:00" updated: "2026-10-14T15:20:29+02:00" --- # Hamburger Menu The hamburger menu is an icon made of three horizontal lines that hides the navigation of a website or app. It saves space but makes content harder to find. - **Buchstabe:** H - **Englischer Begriff:** Hamburger Menu UX glossary · engl. Hamburger Menu # Hamburger Menu The hamburger menu is an icon made of three horizontal lines that hides the navigation of a website or app. It saves space but makes content harder to find. Imagine you open a bike shop’s website on your phone to check the opening hours. You see a logo, a large photo and three horizontal lines in the top right corner. Whether the opening hours are hiding behind them, you won’t know until you tap. Those three lines are the hamburger menu. ## Explained simply The hamburger menu is an icon made of three stacked lines that hides the navigation of a website or app. It gets its name because the lines look like a bun, a patty and another bun. Think of it as a drawer: everything is neatly tucked away, but you have to know or guess that the drawer exists and then pull it open. The icon is older than many people think. Designer Norm Cox created it for the interface of the Xerox Star, a workstation released in 1981, where it opened a list of additional commands. It spread on smartphones from around 2009 onward, because small screens leave little room for visible navigation. ## What research shows The upside is obvious: the menu saves space. The downside is just as clear: what you can’t see gets used less. In 2016, the Nielsen Norman Group studied how people deal with hidden navigation. On desktop, participants used hidden navigation in 27 percent of cases and visible navigation in 48 percent. On mobile, the gap was smaller but still there: 57 percent for hidden navigation versus 86 percent for a combination of visible and hidden items. Tasks with hidden navigation also took longer and were rated as more difficult. That doesn’t mean the hamburger menu is always wrong. It means your most important paths shouldn’t live only inside it. You can read more in [The 4 Most Frequently Asked Questions About the Hamburger Menu](https://insideuxdesign.com/en/blog/the-4-most-asked-questions-about-the-hamburger-menu). ## An example Back to the bike shop. Before, every page sits inside the hamburger menu, including opening hours and repair bookings, the two most common reasons people visit. Many scroll around without success and end up calling instead. After, “Book a repair” and “Opening hours” appear as visible links right below the logo. Less frequent pages like jobs or the legal notice stay in the menu. The icon also gets the label “Menu”, so people who don’t recognize it still know what’s behind it. ## In practice - **Show what matters most.** Use data or [user research](https://insideuxdesign.com/en/glossar/user-research) to find the two to four most common goals and put them in plain sight. - **Label the icon.** The word “Menu” next to the three lines takes up little space and removes doubt. For [screen readers](https://insideuxdesign.com/en/glossar/screen-reader), the button also needs a clear accessible name. - **Skip it on desktop.** There’s usually enough room for visible navigation there, and the study found the downside of hidden menus to be largest on desktop. ## Related terms [Information Architecture](https://insideuxdesign.com/en/glossar/information-architecture), [Progressive Disclosure](https://insideuxdesign.com/en/glossar/progressive-disclosure), [Affordance](https://insideuxdesign.com/en/glossar/affordance), [Mental Model](https://insideuxdesign.com/en/glossar/mental-model) ## Sources - [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, accessed 2026](https://en.wikipedia.org/wiki/Hamburger_button) ## More terms [ ### A/B Testing An A/B test is an experiment that shows two versions of a page or element at the same time to randomly split groups of visitors. It lets you decide with real data which version works better. ](https://insideuxdesign.com/en/glossar/a-b-testing) [ ### ARIA ARIA is a W3C standard that adds roles, states and properties to HTML. It tells screen readers what an element is and how it currently behaves. ](https://insideuxdesign.com/en/glossar/aria) [ ### Accessibility Accessibility means designing websites, apps and digital documents so that everyone can use them, including people with visual, hearing, motor or cognitive disabilities. ](https://insideuxdesign.com/en/glossar/accessibility) [ ### Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. ](https://insideuxdesign.com/en/glossar/affordance) [ ### Alt Text Alt text is a short text version of an image, stored in the HTML alt attribute. Screen readers read it aloud so people who can’t see the image get the same information. ](https://insideuxdesign.com/en/glossar/alt-text) [ ### Atomic Design Atomic Design is a method for building user interfaces from small, reusable building blocks, from single elements like buttons all the way up to complete pages. ](https://insideuxdesign.com/en/glossar/atomic-design) [ ### BFSG The BFSG, Germany’s Accessibility Strengthening Act, has required many companies since 28 June 2025 to make certain products and digital services, such as online shops, accessible. ](https://insideuxdesign.com/en/glossar/bfsg) [ ### Card Sorting Card sorting is a research method in which people sort terms written on cards into groups. It shows you how they mentally organize content, so you can plan navigation that makes sense to them. ](https://insideuxdesign.com/en/glossar/card-sorting) [ ### Cognitive Load Cognitive load is the mental effort it takes to understand and use an interface. The less unnecessary thinking a design demands, the easier the actual task becomes. ](https://insideuxdesign.com/en/glossar/cognitive-load) [ ### Color Vision Deficiency A color vision deficiency means someone has a harder time telling certain colors apart than most people. The most common type is red-green deficiency. ](https://insideuxdesign.com/en/glossar/color-vision-deficiency) [ ### Contextual Inquiry Contextual inquiry is a research method where you observe and interview people in their real work environment. It shows you how they actually get tasks done, not just how they describe it. ](https://insideuxdesign.com/en/glossar/contextual-inquiry) [ ### Contrast Ratio The contrast ratio describes how much two colors differ in brightness, such as text and background. WCAG requires at least 4.5:1 for normal text. ](https://insideuxdesign.com/en/glossar/contrast-ratio)