Mobile Navigation Patterns That Actually Work
Most of your visitors are on a phone, which means your mobile navigation is your navigation. Yet it is usually designed last, as a compressed version of the desktop menu, with every item hidden behind one icon.
Put the primary action outside the menu
Whatever you most want people to do, call, book, get a quote, buy, should be visible without opening anything. A phone icon or a short button in the header, always present, converts better than the same action buried three taps deep. If it fits, a persistent bottom bar with one or two actions works even better on long pages.
Keep the menu short and flat
Seven items is plenty. Nested submenus that require tapping a small chevron to expand are where mobile navigation goes to die; visitors either miss them or open the wrong one. If your site genuinely has fifty pages, use a shallow menu plus a good search and clear in-page links, not a five-level tree.
Details that decide whether it works
- Tap targets of at least 44 pixels, with space between them. Adjacent links that are easy to mis-tap cause more frustration than any other single issue.
- A close affordance that is obvious, and tapping outside the menu should close it.
- Reachability. On large phones the top corners are hard to reach one-handed; important actions belong lower.
- State that survives. Opening the menu and going back should not lose the visitor's place.
- Text labels, not only icons. Icons alone are ambiguous outside of a handful of universal ones.
The sticky header trade-off
A sticky header keeps navigation available and costs vertical space on a screen that has little. Keep it thin, hide it on scroll down and reveal it on scroll up, and never let it plus a cookie banner plus a chat bubble occupy a third of the viewport at once.
How to test it
Hand your phone to someone who has never used your site and ask them to find your pricing and then call you. Watch without helping. Whatever they hesitate over is your list, and it will be short and specific.
