Mobile Menus for Small Business Websites: What Visitors Find

Short answer: If your site has four or fewer main sections, show them as visible links on mobile instead of hiding them behind a hamburger icon. With more than that, show the most important two or three and put the rest under a clearly labeled "Menu" button. Either way, keep "Call" and "Book" outside the menu, because the actions that make you money shouldn't be one tap further away.

What the research says, briefly

Nielsen Norman Group ran a quantitative study of hidden navigation (links tucked behind an icon), visible navigation and a "combo" of both. Their summary: hiding a site's main navigation cut discoverability almost in half, and made tasks slower and feel harder. The effect was strongest on desktop, but present on phones too.

For phones, NN/g's recommendations are practical rather than absolute:

With four or fewer top-level links, display them as visible links.
With more than four, hiding some is the reasonable trade-off, because an expandable menu works better than the alternatives.
Provide in-page links to important information so people don't depend on the menu.

The good news for small businesses: many sites have only a handful of pages that really matter, which is a short list to design around.

A 2025 NN/g follow-up found the hamburger icon is more familiar than it was a decade ago, but that the old best practices still apply: put it where people expect it, keep it plain, and label it "Menu."

The pattern gallery

Pattern 1: Visible links in the header

What it looks like: three or four short text links across the top under the logo, for example "Services · Prices · About · Contact."

When to use it: sites with four or fewer main sections, short labels and no submenus. Common for a solo practitioner, a single-location salon or a small consultancy.

Watch out for: long labels that wrap onto two lines, and links so close together that thumbs hit the wrong one.

Pattern 2: Combo (a few visible, the rest under "More")

What it looks like: "Menu · Book · Call" in the header, or "Services · Pricing · More."

When to use it: five to ten sections, but two or three that most visitors want. A restaurant might show "Menu" (the food kind), "Book" and "Order," with hours, private dining and gift cards under "More."

Watch out for: naming collisions. A restaurant's food menu and the navigation menu shouldn't both be labeled "Menu"; use "More" or "Pages" for navigation.

Pattern 3: Labeled hamburger plus sticky action buttons

What it looks like: a three-line icon with the word "Menu," plus one or two buttons that stay visible as you scroll: a phone icon labeled "Call," and "Book" or "Get a quote."

When to use it: service businesses with many service pages (a plumber with 15 service and area pages). Most visitors want to call or request a quote; few browse the full list.

Watch out for: NN/g's discoverability guidance for mobile menus. Make the button visually distinct from the logo, make it look tappable, give it a legible, high-contrast label, and consider making it sticky so it's always reachable.

Pattern 4: Full-screen menu with grouped sections

What it looks like: tapping "Menu" opens a full-screen panel with grouped links ("Services," "Areas we cover," "About us"), each group expandable, and the phone number and booking button repeated at the bottom.

When to use it: larger small business sites, such as a multi-location clinic or a contractor serving many towns, where the menu genuinely has two levels.

Watch out for: deep nesting. Two levels is the limit on a phone. If people need three taps to reach a page, add that page as an in-page link from the homepage instead.

Labels people understand

Your menu labels matter as much as the pattern. A few rules:

Use the customer's words. "Prices" beats "Investment." "What we fix" beats "Solutions."
Keep labels to one or two words so they fit without wrapping.
Put the most-used item first inside the menu. Check your analytics for your top five pages.
Don't hide contact details only in the menu. Phone, address and hours should also sit in the footer and on the contact page.

Make the menu accessible

A menu button is a toggle, and assistive technology needs to know whether it's open. MDN's documentation on aria-expanded says a button that toggles a widget should have aria-controls pointing at the controlled element and aria-expanded set to its current state, switching from "false" to "true" when it opens. Beyond that:

The button must be a real <button> (or behave like one) so it works with a keyboard.
When the menu opens, keyboard focus should move into it, and Escape should close it.
The button needs an accessible name ("Menu" in text, not just an icon).
Tap targets need enough size and spacing for thumbs. Check WCAG's target-size guidance when you set this.

Many website builders and themes handle some of this; check rather than assume.

A 10-minute test checklist

Do this on a real phone, not a desktop browser squeezed narrow.

Open your homepage. Without scrolling, can you see how to call or book?
Hand the phone to someone who hasn't seen the site. Ask them to find your prices. Don't help.
Ask them to find your opening hours, then how to get to you.
Open the menu. Does every label fit on one line? Is anything you'd consider important buried at the bottom?
Close the menu. Is it obvious how to get back to it after scrolling halfway down a page?
Turn on your phone's screen reader for two minutes (VoiceOver on iPhone, TalkBack on Android). Does it read out the button's name and say whether the menu is expanded or collapsed?
With a Bluetooth keyboard or on a laptop with a narrow window, tab to the menu button and press Enter. Can you reach every link and close it again with Escape?

If the person in step 2 hesitates for more than a few seconds, your navigation is costing you enquiries.

FAQ

Should the hamburger icon go on the left or right?

NN/g's 2025 research found the top-left corner is where users commonly expect hidden navigation. Many sites use the right; what matters most is that it's labeled and clearly separated from the logo.

Is a bottom navigation bar a good idea for a website?

It's common in apps. On a small business website, a sticky bottom bar with "Call" and "Book" can work well, but don't stack it on top of cookie banners and chat widgets, or it covers your content.

How many items should a mobile menu have?

As few as the business genuinely needs. If you're past eight top-level items, the problem is usually the site structure, not the menu design.

If your current mobile menu hides the booking button three taps deep, we can redesign the header around the actions that matter.