Mobile menu design checklist for small business websites

A mobile menu can use a perfectly reasonable pattern and still annoy people. The panel opens but the page behind keeps scrolling. Submenus expand off the bottom of the screen. The close button is nowhere obvious. Nobody can find the phone number. This mobile menu design checklist assumes you have already decided on the type of menu and focuses on the details that decide whether it actually works. Go through it on a real phone, tick what passes, and note what does not.

The menu button: can people find and understand it?

1. The button is visible without scrolling on every page, usually in the header.
2. It has a text label such as "Menu", or at least an accessible name, not only three lines. A visible label helps less tech-comfortable visitors.
3. The tappable area is at least 44 to 48 pixels, even if the icon is smaller.
4. The icon changes to a clear close symbol when the menu is open, or a separate, obvious close button appears inside the panel.
5. It is a real button element, not a styled div or link, so it works with keyboards and assistive technology.

Opening and closing: is the state obvious?

Visitors should never wonder whether the menu is open, half-open or stuck.

1. The menu opens quickly, with any animation kept short, roughly under 300 milliseconds, so it does not feel sluggish.
2. The open panel is visually distinct from the page, with a solid background or a dimmed overlay behind it.
3. There are several ways to close it: the close button, tapping the overlay, and pressing Escape on a connected keyboard.
4. Choosing a link closes the menu, including anchor links to sections on the same page, which often leave the menu open by mistake.
5. Pressing the browser back button does something sensible and does not leave a broken half-open state.

Scroll behaviour: does the page behind stay put?

One of the most common faults is scroll bleed: the visitor swipes inside the menu, reaches the end of the list and the page underneath starts scrolling instead. When they close the menu, they are somewhere unexpected.

1. Background scrolling is locked while the menu is open, and restored exactly when it closes, returning the visitor to the same position.
2. A long menu scrolls inside its own panel, so the last items can always be reached on short phones and in landscape.
3. The panel height accounts for browser toolbars, using modern viewport units where needed, so bottom items are not hidden behind the address bar.

Nested items: can visitors reach sub-pages without getting lost?

Small business sites often group services, locations or product categories under a parent item. On a phone, hover is not available, so submenus need their own handling.

1. Parent items with children have a separate expand control, such as a chevron button, distinct from the parent link itself.
2. The expanded state is shown clearly by rotating the chevron and indenting or shading the child links.
3. Nesting stays shallow: one level of submenu is usually enough. If you need three levels, consider rethinking the site structure.
4. Opening one submenu can close others, keeping the panel short, or all can stay open if that suits a small menu. Pick one behaviour and apply it consistently.
5. The current page is highlighted, so visitors know where they are.

Contact shortcuts: is the next step one tap away?

For a local service business, the menu is often where visitors look when they are ready to get in touch. Make it easy.

1. A tap-to-call button using a tel: link sits near the top or bottom of the open menu, with the number written in full.
2. A WhatsApp button opens a chat with your business number, ideally with a short pre-filled greeting that tells you which page they came from.
3. The main call to action, such as "Get a quote" or "Book a visit", is styled as a button and not buried among regular links.
4. Useful basics such as opening hours or a map link are included only if they are short and genuinely helpful, not stuffed in to fill space.

Accessibility: does it work for everyone?

1. The toggle announces its state using aria-expanded, set to true or false as the menu opens and closes, and aria-controls points to the menu panel.
2. Keyboard focus moves sensibly: into the menu when it opens, stays within it while open, and returns to the toggle button when closed.
3. Text and links meet contrast requirements, at least 4.5:1 for normal text, including over any semi-transparent overlay.

Screen reader testing does not need special equipment. VoiceOver on an iPhone and TalkBack on Android are built in. Turn one on, open your menu and listen to whether the button, its state and the links make sense.

Putting the checklist to work on your site

Run the full list on two phones, one iPhone and one Android, in portrait and landscape. Score each item as pass, fail or not applicable, and fix failures in this order: anything that blocks reaching a page or contacting you, then scroll and closing problems, then polish.

Many of these issues live in theme or plugin code rather than in your content, so they may need a developer. Our website development team builds menus that pass this checklist from day one, and if you want visitors to reach you instantly from the menu, see our WhatsApp automation setup.

Frequently asked questions

Should the mobile menu slide in from the left or the right?

Either can work, and there is no strong evidence that one is universally better. Place the button and panel consistently, match any user expectations for your language direction, and make sure the close control is easy to reach.

Should my phone number be inside the mobile menu or in the header?

If phone calls are your main source of leads, a small call icon in the header is worth it. Repeating the number with a tap-to-call button inside the menu costs nothing and helps visitors who open the menu looking for contact options.

Why does my page scroll behind the open mobile menu?

The site is not locking background scroll while the menu is open. A developer can apply a scroll lock when the menu opens and remove it on close, taking care to restore the original scroll position, especially on iOS Safari.