Mobile Navigation Design Rules for Beginner Web Designers

Open any small business website on your phone and count the taps it takes to reach the opening hours. On most sites I review for students, it is three or four: hamburger icon, a menu with eleven items, a submenu, then a long page. Mobile navigation design is where many beginner layouts quietly fall apart, because it is usually designed last, on a desktop screen, by shrinking the top bar until it fits.

When I teach this, I ask students to design the phone menu first and the desktop bar second. It feels backwards for about a day. Then they notice that a menu which works in 360 pixels of width forces every hard decision about what the site is really for. What follows are the rules I give them, with the numbers that make each one concrete.

Start Mobile Navigation Design With a Content Audit

Before drawing any icon, list every page the site has, then mark how often a real visitor needs each one. For a café, it might look like this: menu and prices, opening hours, location, booking, about, events, careers, press. The first four will cover the vast majority of visits. The last two are rarely needed and do not belong in the main menu at all.

A useful target is five to seven top level items. Below five, people may not find what they expect. Above seven, the menu becomes a list to read rather than a choice to make. If you have more, group them, or move the rare ones to the footer, which on a phone is a perfectly respectable home for careers and legal pages.

Choosing a Pattern That Fits the Site

There is no single correct mobile menu. There are a handful of patterns, each suited to a different amount of content.

The last pattern is the one I recommend most often. A restaurant site with a visible "Book a table" button and a hamburger for everything else gets the most common task done in one tap, while still offering the rest.

The Hamburger Icon Is Not the Problem

You will read in many design articles that the hamburger icon is bad and should be avoided. The research behind that claim mostly dates from around 2014 to 2016, when the three line icon was still unfamiliar to many people. It is now one of the most recognised symbols on the web.

The real problem is what designers hide behind it. If the single thing most visitors came for is inside a hidden menu, the icon gets the blame for a decision about priorities. Keep the hamburger if it helps, but put the main task outside it. Adding the word "Menu" next to the icon also helps older visitors and costs about 40 pixels of width.

Touch Targets, Spacing and Thumbs

A link that is easy to click with a mouse can be miserable to tap. Fingers are blunt, and people often use their thumb while holding the phone in one hand.

Numbers worth remembering

• Make every tappable item at least 44 by 44 pixels, and 48 is more comfortable.
• Leave at least 8 pixels between neighbouring targets so a slightly off tap does not hit the wrong link.
• Set menu labels at 16 pixels or larger, the same minimum most designers use for body text.
• Place the most used items where a thumb reaches easily, which on a large phone is the lower half of the screen.

A quick test: hold your phone in one hand and try to tap every menu item with your thumb without shifting your grip. Anything you have to stretch for is in the wrong place or too small.

Labels People Understand at a Glance

Menu labels are tiny pieces of copy, and they do a lot of work. Clever labels such as "Our Story" or "Discover" force visitors to guess. Plain labels such as "About", "Prices" or "Contact" do not.

Keep labels to one or two words, use the words your visitors would type into a search box, and avoid two labels that could mean the same thing. "Services" and "What we do" on the same menu will send half your visitors to the wrong page. The same principle of making the next step obvious appears in our article on designing a page layout that guides the eye, and it applies to menus just as much.

Showing Where the Visitor Is

On a desktop, people can see the whole navigation bar and the current page highlighted in it. On a phone, the menu is often closed, so the visitor loses their sense of place.

Two small fixes help. First, when the menu is open, mark the current page with weight, a colour bar or an underline, not colour alone, so it works for people who do not see colour differences. Second, put a clear page title near the top of each page, so a visitor who lands from a search result knows where they are without opening anything. If your site has deep sections, a single line breadcrumb above the title adds orientation at very little cost. Keep it to the parent section and the current page; a five step trail wraps onto three lines on a narrow screen and pushes the content down.

Frequently Asked Questions

Should the mobile menu match the desktop menu?

The items and their order should match, so returning visitors are not confused. The layout can differ. A horizontal bar on desktop and a vertical panel on mobile is normal, as long as the labels stay the same.

Are dropdown submenus acceptable on a phone?

Yes, if they open on tap with a clear arrow and close again easily. Avoid more than one level of nesting. If you need three levels, the structure of the site probably needs simplifying first.

Where should the search box go?

If search is a main task, as on a shop or a large documentation site, keep a search icon visible in the header. On a small site with fewer than twenty pages, search is rarely worth the space.

The Practical Takeaway

Design the phone menu first. Cut it to five to seven plain labels, keep the main task visible outside the hamburger, make every target at least 44 pixels, and test it one handed. When the mobile menu works, the desktop version almost designs itself. If forms are part of your main task, read why placeholder text makes web forms harder before you build them.