Hamburger menu or bottom navigation? Choosing a mobile menu

For years the answer to "how should the menu work on mobile?" was automatic: put a three-line icon in the corner and hide everything behind it. It is still a sensible choice for many websites, but it is no longer the only one, and for some sites it is the wrong one. The hamburger menu vs bottom navigation question is really a question about your visitors: how many destinations they need, how often they switch between them, and whether they arrive to browse or to do one specific thing.

This comparison covers four common patterns and ends with a simple way to choose.

Pattern 1: The hamburger menu

A button, usually three horizontal lines and ideally labelled "Menu", opens a panel containing the full navigation. It is the most familiar pattern on the mobile web.

Where it works well

• Sites with many pages or nested sections that could never fit on screen.
• Brochure-style business sites where most visitors land on one page from search and rarely move around.
• Designs that need the header kept compact to leave room for content.

Its weaknesses

Hidden navigation is less discoverable. Visitors cannot see at a glance what the site offers, and every move to another section costs at least two taps. Usability researchers, including the Nielsen Norman Group, have reported that people use hidden navigation less than visible navigation. The icon also usually sits in a top corner, which is a stretch for thumbs on large phones.

Pattern 2: Bottom navigation bar

A bar fixed to the bottom of the screen shows three to five key destinations, each with an icon and a short label. It is the standard in many native apps, and a growing number of web apps and shopping sites use it too.

Where it works well

• Web apps and portals that people use repeatedly: dashboards, booking systems, member areas.
• Online stores where users constantly move between Home, Categories, Search, Cart and Account.
• News portals where readers switch between sections, latest stories and saved articles.

Its weaknesses

It permanently uses vertical space, which is precious on short phones. It holds five items at most, so larger sites still need a secondary menu. On mobile browsers it can clash with the browser's own bottom toolbar, and with cookie banners or chat bubbles that also want the bottom edge. For a typical ten-page service business site, it often feels like an app pattern forced onto a brochure.

Pattern 3: Priority+ navigation

Priority+ shows as many menu links horizontally as fit on the screen, then gathers the rest under a "More" button. On a wide phone you might see four links, on a narrow one only two.

Where it works well

Content sites with a clear order of importance among sections, such as a publication with Top Stories, Business, Sport and many more categories. It keeps the most important links visible without hiding everything.

Its weaknesses

It needs careful development, because items move in and out of the "More" menu as width changes, and it must be tested thoroughly for accessibility. Visitors may not realise which links are hidden, so the order of priority must be genuinely right.

Pattern 4: Fully visible links

If a site has only a handful of pages, the simplest option may be to show every link directly: a short row under the logo, or a horizontally scrollable strip of links.

Where it works well

Very small sites with three to five pages, landing pages with only a couple of anchor links, and single-product businesses. Nothing is hidden, so there is nothing to discover.

Its weaknesses

It does not scale. As soon as the business adds a page or two, links wrap onto multiple lines or become too cramped to tap. A horizontally scrolling strip also needs a visual hint, such as a partly cut-off final item, so visitors know more links exist.

Combining patterns sensibly

Many good mobile sites mix approaches rather than committing to one. A few combinations that work:

• A hamburger menu for the full site map, plus a visible "Call" or "WhatsApp" button in the header for the main action.
• A bottom bar for three or four core tasks, with a "More" item that opens a full menu.
• Visible category chips under the header on a store, alongside a hamburger for account, policies and help pages.

The aim is always the same: the actions most visitors need most often should be visible, and everything else should be one clear tap away.

A simple way to choose your mobile menu

Answer these questions using your analytics and knowledge of your customers:

1. How many top-level destinations are there? Five or fewer can be visible or use a bottom bar. More than that suggests a hamburger or priority+.
2. Do visitors move between sections often? Frequent switching favours visible or bottom navigation. Single-page visits favour a compact hamburger.
3. Is this a site or an app? Repeat-use tools and logged-in areas suit bottom bars. Marketing sites usually do not.
4. What is the single most important action? Whatever pattern you pick, keep that action visible outside the menu.
5. What else occupies the screen edges? Check for conflicts with chat widgets, cookie banners and sticky add-to-cart bars before committing to a bottom bar.

Once you have picked, test with five or six real users on their own phones and watch whether they find two or three key pages without help. For stores and portals with many sections, planning navigation is part of our online store development and news portal development projects.

Frequently asked questions

Is the hamburger menu bad for usability?

Not inherently. It hides navigation, which reduces discoverability, but it is well understood and suits sites with many pages. Adding a "Menu" label and keeping key actions visible outside it reduces most of the downsides.

How many items should a bottom navigation bar have?

Between three and five is the common guidance. Fewer than three rarely justifies the space, and more than five makes each item too narrow to label and tap comfortably.

Should a mobile website look like an app?

Only if people use it like an app, returning often to complete tasks. For a typical business website visited occasionally, conventional web navigation is usually clearer.