Hamburger menu vs bottom navigation on mobile websites

Key takeaways

Hamburger menu vs bottom navigation is a choice between hiding your options and showing them. A hamburger menu saves space and suits sites with many pages. Bottom navigation keeps three to five key destinations visible under the thumb. Most small business sites do best with a hamburger for the full menu and a bottom bar for actions.

• Hamburger menu: hides every link behind one icon, usually in a hard-to-reach top corner.
• Bottom navigation: shows three to five destinations at all times, within thumb reach.
• Hamburger menu: hidden navigation was used in 57% of cases in NN/g's mobile tests.
• Bottom navigation: visible and combined navigation was used in 86% of cases.

What is the difference between the two?

A hamburger menu is the three-line icon that opens a hidden list of links when tapped. Bottom navigation, also called a tab bar, is a row of three to five labelled icons fixed to the bottom of the screen and always visible. The first hides navigation to save space. The second gives up space to keep navigation in view.

Both are familiar. The hamburger icon is near universal on mobile websites, and bottom bars are standard in apps. The question for a business is which gets more visitors to the page that matters.

• Why mobile-friendly web design is essential for UK businesses
• Website navigation best practices

What does research say about hidden menus?

Hidden navigation is used less. Nielsen Norman Group tested 179 participants on six sites in 2016. On mobile, people used hidden navigation in 57% of cases, against 86% where navigation was visible or partly visible. The study measured a drop of more than 20% in content discoverability on sites with hidden navigation, and mobile users were 15% slower.

The reason is simple. People cannot choose an option they do not see. A visitor who would happily tap 'Prices' if it were on screen will not always open a menu to look for it. Out of sight is, for a meaningful share of visitors, out of mind.

When does a hamburger menu work well?

A hamburger menu works well when the site has more sections than can fit in a bar, when visitors mostly arrive on the page they need, and when the main actions are available without opening it. For a firm with eight services, a blog, case studies and several locations, hiding the full list is reasonable.

• Label it: the word 'Menu' beside or under the icon improves recognition.
• Make the icon's touch area at least 48px.
• Keep the opened list short, with the most used pages first.
• Make it easy to close, with a large cross and a tap outside the panel.
• Do not hide the phone number or booking link inside it.

• Tap target size: how big should buttons be on mobile?

When does bottom navigation work better?

Bottom navigation works better when a site has a small number of destinations that most visitors need, and when people move between them. A restaurant with Menu, Book, Find us and Call. A shop with Home, Categories, Search and Basket. In those cases a visible bar removes a tap from every journey and sits where the thumb rests.

It needs discipline. Three to five items is the limit. Each needs a clear icon and a short label, because icons alone are guessed wrong. And it must not collide with cookie notices, chat widgets or the browser's own toolbar.

• The thumb zone: design mobile pages for one-handed use
• Restaurant mobile websites: menu, booking and directions

Which should a small business website use?

For most small business websites, use both in different roles. Keep a labelled hamburger menu at the top for the full list of pages. Add a slim bar at the bottom for the one or two actions that produce enquiries, such as Call and WhatsApp, or Book. Navigation is hidden but available. Action is visible and reachable.

If your site has five or fewer main sections, consider showing them all. On a phone that might be a bottom bar, or a short row of links under the header. The fewer the choices, the stronger the case for not hiding them.

• Sticky call-to-action bars on mobile: when they work

What are the costs and trade-offs?

Changing the mobile navigation pattern is a template change, typically within an indicative £500 to £3,000 for mobile work on an existing site. A bottom bar is quicker to add than a full navigation redesign. Either way, the larger task is deciding what goes in it, which is a business decision.

The trade-off with a bottom bar is screen space and clutter. On a small phone, a header, a cookie notice, a bottom bar and a chat bubble can leave little room for content. If you add a bar, remove something else. The trade-off with a hamburger is discoverability, which you offset by putting key links in the page itself.

What does this look like in practice?

A pattern we see on professional services sites: the desktop menu has seven items, and on mobile all seven sit behind an unlabelled icon. Analytics shows most mobile visitors view one page and leave. They are not rejecting the firm. They never saw that a fees page or a team page existed.

Adding three plain links under the first section of the homepage, 'Our services', 'Fees' and 'Speak to us', exposes the navigation without redesigning it. Global Bridge Labs (GBL) often makes that change before touching the menu itself, because links in the content are seen by everyone who scrolls.

• See client work
• Website Design & Development for UK businesses
• Make your website work properly on mobile

Mobile navigation checklist

• List the three to five pages mobile visitors need most.
• Decide which one or two actions belong in a bottom bar.
• Label the menu icon with the word 'Menu'.
• Give every navigation control a 48px touch area.
• Repeat key links within the page content.
• Check nothing overlaps the bar on a small phone.
• Compare pages per visit on mobile before and after.

Next step

Look at your mobile analytics for pages per visit and the share of visitors who open the menu, if you track it. Low numbers on both suggest your navigation is hidden too well.