Hamburger menus on desktop: why they hide your services

Key takeaways

A hamburger menu on desktop hides your services behind an icon even though the screen has room to show them. Nielsen Norman Group's testing found hidden navigation reduces how often people use the menu and makes tasks slower on desktop. Show the main menu as visible links on desktop and keep the hamburger for small screens.

• Hidden menus are used less and make finding pages slower (NN/g).
• Desktop screens have room for five to seven visible items.
• If you must hide it, label the icon 'Menu'.
• Keep the contact action visible outside any hidden menu.

What is a hamburger menu?

A hamburger menu is a navigation menu hidden behind an icon of three horizontal lines, opened by clicking or tapping. It was designed to save space on phones. On desktop it became a style choice, used to make headers look minimal.

• The most common business website design mistakes
• Hamburger menu vs bottom navigation on mobile websites

Why is a hamburger menu a mistake on desktop?

Out of sight is out of mind. Visible menu links tell visitors at a glance what you offer, act as a summary of the business and invite exploration. Hidden behind an icon, they do none of that. Nielsen Norman Group found hidden navigation was used less often and lowered task performance on desktop compared with visible navigation.

• Website navigation best practices

What does it cost a business?

Visitors who land on the homepage and see no menu have to guess what is on the site. Some will open the icon; others will scroll, miss the service they wanted and leave. Visitors arriving on an inner page from search lose the quickest way to see what else you offer.

• Information scent: why visitors lose the trail on your site

When is a hamburger acceptable on desktop?

It can be acceptable on sites where the menu is secondary, such as a single-page portfolio, or as an extra menu for secondary links alongside a visible primary menu. Even then, label it with the word 'Menu' beside the icon, which makes it easier to recognise.

How do you show a visible menu without clutter?

Cut the menu to five to seven items first. Then a visible menu fits comfortably in most desktop headers. Group services under one dropdown, move secondary pages to the footer and keep one contact button on the right.

• How many menu items should a website have?
• Mega menus: when a small business website needs one

Where should the switch to a hamburger happen?

Switch to a hamburger only when the visible menu no longer fits: usually on phones and some small tablets. Test the breakpoint on a real tablet and a small laptop; many sites switch too early and hide the menu on screens that could easily show it.

• Responsive breakpoints explained for business owners

What does this look like in practice?

A pattern we see: a sleek desktop header shows only a logo and a hamburger icon, and visitors cannot tell from the first screen that the business offers four distinct services. Showing those services as visible menu items makes the offer clear before anyone scrolls.

• See client work
• Website Design & Development for UK businesses
• Website design review: score your own site in 30 minutes

Desktop navigation checklist

• Show the main menu as visible links on desktop.
• Cut it to five to seven items.
• Keep the contact button visible.
• Label any hidden menu icon 'Menu'.
• Switch to a hamburger only when space runs out.
• Test on a tablet and a small laptop.

Next step

Open your site on a laptop. If the menu is hidden, list the items it contains and see whether they would fit visibly.