Navigation
Hamburger menu
A hamburger menu is a three-line icon that hides a site's navigation links behind a tap, used almost universally to collapse the header on mobile screens.
- Also called
- Menu icon, Burger menu, Three-line menu, Mobile menu
- Spotted on
- 52 of 422 homepages
- Browse examples
- Mobile designs →
What is a hamburger menu?
On SaaS sites the hamburger is the mobile version of the navigation bar. At phone width the desktop links, dropdowns and secondary buttons don't fit, so the header collapses to the logo, the icon and, on the better sites, one primary button. In our mobile reviews the pattern is near-universal: "the nav collapses to a logo and menu icon" is one of the most repeated sentences.
The difference between good and weak versions is what stays outside the icon. PandaDoc keeps "Request a demo" visible next to the hamburger, and Superconductor keeps "Get started", so the main action is one tap away instead of two. A header that hides everything, including sign-up, makes the visitor dig for the one thing the page wants them to do.
On desktop the hamburger is a deliberate stylistic choice rather than a necessity. A few minimal sites, Basewell among them, use only a wordmark and a hamburger even at full width. It suits a page with few destinations, but it hides pricing and docs from visitors who came looking for exactly those links.
Hamburger menu examples from real SaaS sites
Each one is a mobile capture whose design review mentions the hamburger menu.
When to use a hamburger menu, and when not to
Use it for
- Narrow screensBelow tablet width, when the navigation links can no longer fit in one row beside the logo.
- Many secondary linksResources, docs, company and legal pages that matter but don't need to be visible all the time.
- Minimal, single-path sitesA page with one job, where the menu is an escape hatch rather than the main route.
Avoid it for
- Hiding the primary CTAKeep the sign-up or demo button visible next to the icon; don't bury it inside the menu.
- Desktop SaaS sites with pricingOn wide screens, hiding Pricing and Docs behind an icon costs clarity for no layout gain.
- Two or three linksIf the whole navigation is a couple of links, show them; a menu that opens to two items wastes a tap.
Anatomy of a hamburger menu
- 1IconThree horizontal lines (sometimes two) in the top corner, usually the right, with a tap target of at least 44px.
- 2Persistent itemsThe logo and, ideally, one primary button that stay visible beside the icon.
- 3Menu panelA drawer, dropdown sheet or full-screen overlay holding the navigation links.
- 4Close controlThe icon turning into an X, or a separate close button, so the visitor can get back to the page.
Common hamburger menu variants
1. Full-screen overlay
The menu covers the whole viewport with large links, common on design-led sites.
2. Dropdown sheet
A panel slides down under the header and pushes or covers the page below.
3. Side drawer
The menu slides in from the right edge, leaving a strip of the page visible behind it.
4. Desktop hamburger
The icon used at full width as a minimalist choice, with only a wordmark beside it.
Spotted in our design reviews
Our reviews describe a hamburger menu on 52 of the 422 SaaS homepages in the catalog. A few of them:
The header holds only the Basewell wordmark at left and a hamburger icon at right, so the navigation is collapsed.
Basewell · Above the fold
At 390px the navigation collapses to a hamburger and the headline wraps to two centred lines with both buttons side by side.
Handhold · Mobile
The header collapses into a menu icon.
Clutch Security · Mobile
At 390px the navigation collapses to a menu icon, and the hero stacks with the headline above the copy while the mock cards disappear.
Workos · Mobile
At 390px the header collapses to a logo and a menu icon, and the hero cards shrink to two thumbnails side by side.
Reflexai · Mobile
At 390px the hero headline wraps onto four lines and the navigation collapses into a menu icon.
Neon · Mobile
Onuniverse is one content column on a white ground with a single saturated cobalt blue doing all the accent work: the hamburger icon, the pill button, the monospaced paragraphs and every illustration panel.
Onuniverse · Overview
At 390px the nav collapses to a hamburger icon beside the wordmark, and the badge and tag wrap onto two lines.
Tryterracotta · Mobile
Often confused with
Hamburger menu vs. navigation bar
The navigation bar is the whole header; the hamburger menu is how that header's links are collapsed when space runs out.
Hamburger menu vs. mega menu
A mega menu is a large desktop dropdown that shows many links at once. A hamburger hides links until tapped, and on mobile a mega menu usually becomes a nested hamburger panel.
Frequently asked
Should the sign-up button go inside the hamburger menu?
It can appear there too, but it should also stay visible next to the icon. The strongest mobile headers in our catalog keep a logo, one button and the icon.
Left or right for the hamburger icon?
Right is the convention on SaaS marketing sites, opposite the logo on the left. Putting it on the left mostly makes sense for app-style layouts with a side drawer.
Is a hamburger menu bad for desktop?
Not always, but it is a trade-off. On a SaaS site most visitors want pricing, docs or login, and hiding those behind an icon adds a click to every one of those visits.