Mobile Website Navigation Best Practices Before the Menu

Compare three mobile layouts and decide which services, booking and contact links customers should see straight away.

A customer lands on your website with a leaking tap, an overdue haircut or a question about your services. Your logo looks lovely. Unfortunately, everything useful is hiding behind three little lines. A menu is handy storage, but it needn’t be the front door to every task. Let’s compare three mobile layouts for the same business, then work out what deserves to stay visible, what can tuck away and whether a booking bar would help or simply get under everyone’s thumbs.

What the research actually tells us about hidden menus

Recognising a hamburger icon is not the same as discovering the links behind it. Customers may know those three lines mean “Menu” without knowing your prices, services or booking link live there.

The research has a history worth keeping straight:

• 26 June 2016: NN/g published its hidden-navigation study, examining how hiding navigation affected website use.
• 23 August 2020: NN/g published its accordion-icon study, addressing the symbols used to signal expandable content.
• 23 October 2026: Smashing Magazine returned to accordion icons. October’s coverage renews an established discussion; it does not report a new trial.

One finding deserves careful handling: mobile participants took 15% longer with hidden navigation than with combination navigation in the 2016 study. Combination navigation means some links remain visible while others sit inside a menu.

The study involved 179 participants across six websites. Its mobile testing compared hidden and combination navigation, not a fully visible mobile condition. It was not a UK salon conversion experiment, so “15% longer” cannot become a forecast of extra bookings.

For mobile website navigation best practices, treat this as a design hypothesis: exposing useful routes might help customers find them sooner. Test a visible mobile booking button alongside Menu, rather than abolishing menus altogether. These mobile layout decisions belong within the web design process, not a blanket ban on three little lines.

Choose what customers need before they open Menu

Use Show, Explain, Act to decide what deserves space before Menu. It’s a working method, not a proven formula. Show the relevant service, Explain decision-making details such as prices or coverage, and let customers Act through booking or enquiry.

Write three realistic customer questions, using recent emails, calls and messages rather than guesses. These fictional businesses give you a starting point:

• Salon: Do you offer colour appointments? What does it cost? Can I book?
• Plumber: Do you repair boilers? Do you cover my postcode? How do I request a visit?
• Consultant: Is this the right service? What is the engagement like? Can we arrange a conversation?

Turn the answers into candidate visible links and one clearly labelled primary action. For the salon, try “Colour services”, “Prices” and a primary “Book an appointment” button. A fictional £75 colour appointment belongs on the prices page, alongside what’s included—not buried three taps deep.

For the plumber, “Boiler repairs” and “Areas covered” could sit beside “Request a visit”. The consultant might use “Services”, “How engagements work” and “Arrange a conversation”. Choose the right enquiry destination: chatbot or contact form, rather than automatically adding another contact channel.

A small business website menu can still hold secondary destinations, such as careers or company history. It needn’t hide every useful route. Forget an arbitrary five-item rule: what fits depends on label lengths, available space and customer tasks.

Compare three layouts for the same customer tasks

These three hamburger menu alternatives use the fictional Fern Salon. Each equal-width prototype starts at the page top, with identical branding, copy, prices and destinations. Only the navigation changes.

Illustrative task counts, not test results. An activation means a tap or keyboard activation. Booking counts stop at the destination, not completion of an external booking flow.

The matching strip below applies the same layouts to fictional Alder Plumbing. An emergency-led business might prioritise Call instead of a quote.

B is our starting point here, not a universal winner. C earns consideration when longer pages make repeated access to a mobile booking button useful. A remains workable when hidden navigation is secondary and essential tasks already have clear in-page routes.

For website navigation examples in our web design portfolio, the useful comparison is the actual mobile journey, not just a handsome desktop screenshot.

Make every link and expansion button do one clear job

A link takes customers somewhere. An expansion button reveals choices here, without leaving the page. Your small business website menu should make that difference obvious, not turn it into a guessing game.

• To reveal choices: use one Services row with a downward caret. The whole row expands the panel; put a separate “View all services” link inside.
• To visit an overview: make Services a direct link and leave off the expansion icon.

Avoid splitting the job: tapping “Services” visits a page, while its tiny neighbour opens a submenu. Customers shouldn’t need precision aim to choose what happens.

Menu-row close-up: one row, one action

In NN/g’s 2020 accordion-icon study, the caret communicated expansion better than no icon or an arbitrary icon. Plus and right-arrow treatments were not significantly better than no signifier for expecting to remain on the page.

Even with the caret, 29% tapped the label. That supports making the whole row work consistently. It is evidence about expectations and tapping, not proof that one icon increases enquiries.

A short, flat service list may need no nested menu at all. Three clear choices can simply be three links. Keep labels readable with fonts suited to a small business website, rather than decorative navigation lettering.

Check thumbs, keyboards and the space left for content

• Thumb test: W3C’s WCAG 2.2 AA target-size requirement is 24 by 24 CSS pixels, or a qualifying exception, including sufficient spacing. It is not a blanket 44-pixel AA rule. For this redesign, aim for roughly 44–48-pixel controls, measured across the interactive area, not the icon artwork.
• Keyboard test: Tab and Shift+Tab must follow a sensible order, with visible focus. Enter or Space operates disclosure buttons. Escape closes an open disclosure and returns focus to its trigger. Hidden links must leave the tab sequence: no invisible detours to “Book now”.
• State test: Ask your designer to expose expanded/collapsed state to assistive technology. W3C’s disclosure navigation example uses ordinary links and buttons, not an application-style ARIA menu. An ordinary disclosure is not a modal drawer. A modal drawer needs appropriate focus handling: move focus inside, contain it while open, then return it on closing.
• Space test: Check a small phone, landscape, enlarged text and an open booking keyboard. Include cookie controls and any chat widget. A mobile booking button or navigation bar must not cover prices, form fields, validation messages or the final submit button.
• Focus visibility test: Under W3C’s WCAG AA requirement, author-created content must not entirely hide the focused component. This brief aims to keep it fully visible. Include these checks within responsive development and launch checks, not just a tidy desktop preview.

Brief a modest redesign before replacing the whole site

You may need a better header, not a whole new website. Start with a modest, header-only brief: keep what works and compare changes before committing.

Test with a few people unfamiliar with your site. Vary prototype order; ask everyone the same service, price/coverage and booking tasks. Record first choice, completion, wrong turns and anything obstructing the page. These sessions reveal problems, not statistically reliable conversion evidence.

cloudline’s published prices start at £30/hour for ad-hoc work; navigation work is scoped separately. Four hours would be £120—arithmetic, not a fixed redesign quote. Full new-site packages start at £349, a different scope.

Your copyable header-only brief

Improve mobile navigation without replacing the site.

• Retain existing pages, branding, URLs and booking provider.
• Identify priority customer tasks. Request the three mobile variants, including their open-menu states.
• Agree which controls follow links and which expand lists. Specify desktop treatment.
• Check thumb reach, target sizes, keyboard operation, visible focus and remaining content space, including overlay obstruction.
• Skip sticky actions on short pages with an easily reached enquiry button, during distracting booking flows, or where overlays leave too little room.
• Skip nested menus when a flat list or service overview answers the task.
• Only if testing a persistent bar, include one long-page example, such as a salon’s treatment list.
• Run the small comparison above before choosing a layout.

Want help keeping the job this focused? Have a chat with cloudline about your navigation—no whole-site replacement assumed.

Final thoughts

You do not need a fashionable menu or a booking button glued to every screen. Start with the customer’s task, show the useful routes and give each control one clear job. Then compare the options on an actual phone, including the awkward bits such as cookie notices and form keyboards. If your services, booking or contact details are still playing hide-and-seek, talk to cloudline design about a focused navigation redesign. A clearer header may be the right first step.

Frequently asked questions

What is the best navigation menu for a mobile website?

There is no single winner for every business. Start by testing visible priority links alongside a labelled Menu button. Keep booking or enquiry easy to find. A compact action bar is another option, but compare it with a simpler header using the same customer tasks before giving it permanent screen space.

Are hamburger menus bad for mobile websites?

Not automatically. They save space, but hiding links can make those destinations harder to discover. NN/g’s 2016 mobile comparison found slower task completion with hidden rather than combination navigation. Keep useful service and action routes visible where appropriate; the research does not mean every hamburger menu needs removing.

How many items should a small business website menu have?

Use the destinations customers need, then check whether their labels fit comfortably and remain easy to use. For your redesign, do not make a five-item target more important than finding services or contacting you. Start with a flat list and introduce grouping only when it makes the choices clearer.

Should my mobile booking button stay visible while scrolling?

Consider it when customers read a long page before booking and would otherwise need to hunt for the action again. Skip it when the page is short, an inline button already works well, or it distracts during booking. Test it with cookie notices and form keyboards, not just an uncluttered screenshot.

How large should mobile menu buttons be?

WCAG 2.2 AA specifies targets of at least 24 by 24 CSS pixels, subject to exceptions such as sufficient spacing. For this redesign, aim for more generous controls around 44–48 pixels where practical. Measure the whole tappable area, including padding, rather than just the visible hamburger or arrow.