Field Notes
All posts

Navigation patterns on mobile

The hamburger menu hides everything. Sometimes that is right, and often it is not.

The small-screen squeeze

A desktop navigation bar comfortably holds six or seven links. A phone screen holds two or three before they become too small to tap. Every mobile site must decide what to show, what to hide, and how people reach the hidden parts.

The hamburger

The three-line menu icon became the default because it solves the space problem completely: everything goes behind one button. The cost is discoverability. Items that are hidden are used less, sometimes dramatically less. If a key destination lives only in the hamburger, many visitors will never find it.

The hamburger is a reasonable choice for secondary navigation and for sites with many sections of roughly equal importance. It is a poor choice for the two or three destinations that matter most.

Bottom tab bars

Native apps settled on a bar of three to five tabs at the bottom of the screen, and for good reason: it sits where thumbs naturally rest, it shows the main destinations at all times, and it makes the current location obvious. Websites can use the same pattern for app-like experiences, though it competes with the browser's own toolbar on some devices.

Priority plus

The priority-plus pattern shows as many top-level links as fit, then collapses the rest into a "More" menu. On a wide phone you might see four links; on a narrow one, two. The most important destinations stay visible, and nothing disappears entirely.

Scrollable tabs

A horizontally scrollable row of tabs fits many sections into a narrow space. It works well for category navigation, like sections of a news site. Make sure the row visibly continues off the edge, with a partially cut-off item or a fade, so people know to scroll.

Search as navigation

For content-heavy sites, a prominent search field is often the fastest way to anything. Treat it as a primary navigation element rather than a hidden icon.

Do the research

Your analytics show which pages people actually visit. The top three or four destinations deserve to be visible without opening a menu. Everything else can be one tap away.

Tap targets

Whatever the pattern, each item needs a generous touch target, around 44 by 44 points at minimum, with enough spacing that a thumb does not hit the neighbor by mistake. Small, tightly packed links are the most common mobile navigation complaint.

Keep the current location clear

People arriving from a search result land deep in a site with no context. Clear page titles, a highlighted current section, and a simple way back to the home page help them orient themselves quickly.