What Is a Hamburger Menu?
Updated 4 November 2026
Jump to section
A hamburger menu is the three-line icon that hides a website's navigation behind a single tap or click. Designer Norm Cox created it for the Xerox Star workstation, and it later became standard on mobile sites to save space. It works well on small screens. But Nielsen Norman Group found that "discoverability is cut almost in half by hiding a website's main navigation", and in its tests the cost was largest on desktop.
Where the hamburger icon came from
The hamburger icon was designed by Norm Cox for the Xerox Star, one of the earliest graphical user interfaces. As Gizmodo reported in 2014, Cox described the icon as "road sign" simple, meant to "mimic the look of the resulting displayed menu list".
The icon came back into wide use with the smartphone, when small screens made hiding navigation useful again.
Today it is a standard pattern on mobile sites. The shape is familiar enough that many visitors know a tap will open a menu.
What a hamburger menu is good for
A hamburger menu is best on small screens, where a full row of navigation links will not fit. It tucks the menu into one corner and hands the space back to the content.
That trade is why it belongs to responsive design. On a phone, the same links that sit in a visible bar on a laptop have to collapse somewhere, and the hamburger icon is the common home for them.
A menu that slides open is an animation, and how it is built matters. Animations rarely slow a well-built site. Moving an element with transform or opacity stays smooth, while animating its size or position forces the page to recalculate its layout.
The cost: hidden navigation gets used less
Hiding navigation behind a hamburger icon has a measured cost. People use the menu less, and move through the site more slowly, when the links are out of sight.
Nielsen Norman Group tested this directly in a 2016 study. On the desktop, people used hidden menus in only 27% of cases, against 48% and 50% for visible and combo navigation. They were also at least 39% slower to navigate when the menu was hidden.
The reason is simple. Hidden navigation is harder to discover, because a visitor cannot use links they cannot see. An icon asks them to guess what is behind it first.
When to use it, and when not to
Use a hamburger menu on phones, but avoid hiding your main navigation behind one where there is room to show it. On a wide screen, a visible menu is faster and gets used more.
| Screen | What we recommend |
|---|---|
| Phone | A hamburger menu is fine, since space is tight |
| Tablet | Show the key links if they fit, hide the rest |
| Desktop | Show the full menu, do not hide it behind an icon |
A middle path is the combo pattern: show a few important links, and put the rest behind an icon. The same NN/g research found combo navigation performed as well as fully visible menus. A small site with four or five pages should simply show them all, with clear visual hierarchy so the main action stands out.
In our experience, owners often judge a website by how it looks rather than by what it converts. Hiding a short desktop menu behind an icon because it looks modern is the same habit, a common design mistake made for looks rather than for what it does to usability.
Frequently asked questions
Are hamburger menus bad for UX?
Not on mobile, where they save scarce space and many visitors expect them. The problem is using one on a desktop, where there is room to show the menu and hiding it makes people navigate less and slower. The icon itself is fine. Where you use it, and what you hide behind it, is what decides whether it helps or hurts.
Why is it called a hamburger menu?
It is called a hamburger menu because the three stacked lines look like a burger between two buns. The nickname came later, long after Norm Cox designed the icon for the Xerox Star. It is an informal name, not a technical one. You will also see it called a menu icon or a navigation drawer toggle.
Should I use a hamburger menu on desktop?
Usually not, because a desktop has room to show your navigation, and visible links get used far more. Nielsen Norman Group measured hidden desktop menus being used in only 27% of cases. If your menu is short, show it. If it is long, a mega menu or a visible bar with a few grouped links serves better than hiding everything.
What is a good alternative to a hamburger menu?
The best alternative on a wider screen is visible navigation, or a combo that shows key links and hides the rest behind an icon. On mobile, where space forces a choice, a hamburger menu is reasonable, but keep the labels clear once it opens. The aim is that a visitor can always find the way to your main pages.
Does a hamburger menu hurt SEO?
Not directly, since search engines can read the links inside a hamburger menu whether it is open or closed. That holds as long as the links are in the page's HTML, not loaded only after a tap. The indirect cost is that hidden navigation gets used less, so visitors may reach fewer of your pages. Clear, reachable navigation serves both people and crawlers.
Menus built for the screen they sit on
Storming Solutions builds custom-coded websites and runs SEO, AEO, and GEO for Malaysian businesses from Kuala Lumpur. We would rather match the menu to the device than use one pattern everywhere, because a pattern that saves a phone can quietly cost you clicks on a laptop.
Our honest view is that too many sites hide navigation the visitor would happily use if they could see it. On a desktop, showing the menu is usually the easy win.
Want navigation that people actually use on every screen? Talk to us about web development, and we will plan a menu around your visitors, not around a trend.