Mobile Navigation Patterns: Hamburger, Tabs, and More
On a phone, there's no room for a full desktop menu. How you handle navigation on small screens affects whether visitors find what they need. Several patterns work. The best one depends on how many items you have and what visitors do most.
The hamburger menu
Three horizontal lines that open a menu. It's the most common pattern, and widely understood, but it hides navigation behind a tap.
Pros: saves space and works for long menus.
Cons: hidden items get less attention, and one extra tap is needed.
Tips
- Add the word "Menu" next to the icon, or at least give it a clear accessible name
- Make it a real button with
aria-expandedshowing the state. See ARIA basics - Make the target large enough. See touch target sizes
- Keep your most important action, such as "Call" or "Book," visible outside the menu
Visible link row ("priority plus")
Show the most important links directly, and move the rest into a "More" menu.
Pros: key links stay visible.
Cons: needs careful implementation, and the visible set may change by screen width.
Bottom navigation bar
A bar fixed to the bottom of the screen with a few main destinations, common in apps.
Pros: within easy thumb reach and always visible.
Cons: only works for three to five items, and takes screen space. Needs careful design so it doesn't cover content or focus.
Tab bar or scrollable tabs
A row of options at the top, sometimes scrollable horizontally.
Pros: shows all options at once on short menus.
Cons: items off-screen are easy to miss, and horizontal scrolling can be awkward.
Full-screen overlay menu
The menu fills the screen when opened.
Pros: lots of room, big targets.
Cons: takes over the screen, so it needs a clear close control and good focus handling. See accessible modals and popups.
Accordion or nested menus
Sub-sections expand within the menu.
Pros: handles deeper structures.
Cons: can get complicated. Keep depth to a minimum. See accessible navigation menus.
Which should you choose?
| Situation | Pattern to consider |
|---|---|
| Small business site with 4 to 7 pages | Hamburger with a visible call or quote button |
| App-like experience with 3 to 5 key areas | Bottom navigation |
| Larger site with many sections | Hamburger or overlay with a clear structure and search |
| Shop with categories | Hamburger plus visible search and basket. See ecommerce site search |
Design principles
- Put key actions within reach. Many people use phones one-handed.
- Keep labels clear and short. See website navigation best practices
- Show the current page. With more than color alone. See color blindness and web design
- Make everything keyboard- and screen reader-accessible. External keyboards and assistive technology are used on phones too.
- Test on real phones and with real tasks. See user testing on a budget
Don't forget search and contact
Visitors on phones often want to search, call, or find directions. Make those options easy to reach. See click-to-call and phone conversions and mobile-first design.
The bottom line
Pick the simplest pattern that fits your content, label it clearly, make it easy to tap, and keep your main action visible. Then test it with real people on real phones.