Mobile Navigation Design Patterns
Mobile navigation is the structural backbone of any app: it decides whether people find what they need or quietly give up. Unlike desktop, you are working with a narrow screen, a single thumb, and users who expect platform conventions to just work. This guide compares the main navigation patterns — tab bars, drawers, gestures, and more — and gives clear rules for when each one earns its place.
Navigation is one of the most consequential decisions in the broader discipline covered by our complete app design guide. Start there for the full system, then use this piece to choose the right pattern.
The Goal: Make Structure Obvious
Good navigation makes your app’s structure legible at a glance. A user should always be able to answer three questions: Where am I? Where can I go? How do I get back? When any of those is unclear, people thrash, tap the wrong things, and lose trust. Every pattern below is just a different answer to those three questions for a given app shape.
Bottom Tab Bar: The Default for Most Apps
The bottom tab bar is the workhorse of consumer mobile navigation, and for good reason: it keeps your top-level destinations one thumb-tap away, always visible, with clear labels. Both Apple’s Human Interface Guidelines and Material Design endorse it as the primary navigation for apps with a small number of equally important sections.
The rule of thumb: use a tab bar when you have three to five top-level destinations. Fewer than three and a tab bar is overkill; more than five and the targets get cramped and labels truncate. Always pair icons with text labels, keep the selected state obvious, and never hide the bar behind a gesture for primary sections.
Hamburger Menu: Powerful but Costly
The hamburger menu (a navigation drawer behind a three-line icon) hides navigation off-screen until tapped. Its strength is capacity — it can hold many items. Its weakness is discoverability: anything behind it is out of sight, and out-of-sight items get used far less than visible ones. Burying primary destinations in a drawer measurably reduces engagement with those sections.
Use the drawer for secondary and infrequent items — settings, account, help, sign out — not for the core sections people use daily. A common, effective pattern is a bottom tab bar for the three to five primary destinations plus a “More” tab or a drawer for the long tail.
Tab Bar vs Hamburger: A Quick Comparison
| Factor | Bottom tab bar | Hamburger / drawer |
|---|---|---|
| Discoverability | High — always visible | Low — hidden until tapped |
| Item capacity | 3–5 destinations | Many items |
| Thumb reach | Excellent (bottom of screen) | Icon often top-left, hard to reach |
| Best for | Primary sections used often | Secondary, infrequent items |
| Taps to switch sections | One | Two or more |
Gesture Navigation
Gestures are now baseline expectations, not extras. On iOS, the edge-swipe from the left returns to the previous screen, and users expect it inside navigation stacks. On Android, the system back gesture (swipe from either edge) handles back navigation globally. Design with these in mind: do not place destructive controls or custom swipe actions where they collide with system gestures, and make sure your in-app swipes do not fight the OS.
Gestures are great as accelerators for power users, but they should rarely be the only way to do something important. Pair a swipe-to-archive with a visible button or menu so the action remains discoverable.
Other Useful Patterns
- Top tabs / segmented control — for switching between views within a single section (e.g., “Following” vs “For You”). Good for two to four peer views, not top-level navigation.
- Stack navigation — the push-and-pop model for drilling into detail screens, with a back affordance top-left. The foundation of most hierarchies.
- Modal sheets — for focused, self-contained tasks like compose or filters; dismissed by swipe-down or close. Keep them shallow.
- Floating action button — a Material pattern for the single most important action on a screen, such as compose or add.
- Search — for content-heavy apps, prominent search is itself a navigation strategy; never bury it.
Thumb Zones and Reachability
Phones keep getting taller, which makes the top of the screen hard to reach one-handed. Place frequent, primary actions in the comfortable bottom and center zones, and reserve the top for occasional controls. This is a major reason the bottom tab bar beats a top-anchored drawer for primary navigation — it lives where the thumb already is. Keep every interactive target at least 44 pt on iOS / 48 dp on Android, with enough spacing that neighbors are not mis-tapped.
Labels, Icons, and State
Icon-only navigation looks clean and confuses users. Most icons are ambiguous out of context, so pair them with short text labels in tab bars and menus. Make the current location unmistakable with a clear selected state — color, weight, and a filled icon variant all help. Consistency matters: the same destination should sit in the same place on every screen.
Common Mobile Navigation Mistakes
- Hiding primary destinations in a hamburger menu.
- More than five items crammed into a tab bar.
- Icon-only navigation with no labels.
- Custom swipe actions that collide with system back gestures.
- Inconsistent placement, so controls move between screens.
- No clear “you are here” state, leaving users unsure of their location.
Navigation is the first thing users touch after launch, so it pays to make the entry just as smooth. Pair this with our guidance on onboarding screen design, and keep your navigation components consistent by sourcing them from a shared library — see our explainer on UI kits and how to use them.
Frequently Asked Questions
When should I use a bottom tab bar versus a hamburger menu?
Use a bottom tab bar when you have three to five top-level destinations used frequently, because it keeps them visible and one tap away. Reserve the hamburger menu for secondary, infrequent items like settings and help. Burying primary sections in a drawer reduces discovery and engagement.
How many items should a tab bar have?
Three to five. Fewer than three rarely justifies a tab bar, and more than five crowds the targets and truncates labels. If you have more primary areas than that, group some under a “More” tab or rethink your information architecture so the core destinations fit comfortably.
Is the hamburger menu bad for navigation?
Not inherently, but it hides everything behind it, which lowers discoverability. Items in a drawer get used far less than visible ones. Use it for secondary or rarely accessed items, and keep your primary destinations in a visible tab bar where users can reach them in a single tap.
Should mobile navigation icons have text labels?
Yes. Most icons are ambiguous without context, and icon-only navigation regularly confuses users. Pair icons with short text labels in tab bars and menus, and use a clear selected state so people always know where they are. The small space cost is worth the gain in clarity.
How do gestures fit into mobile navigation?
Gestures like edge-swipe back on iOS and the system back gesture on Android are baseline expectations. Design around them so custom swipes do not conflict, and treat gestures as accelerators rather than the only path. Always pair an important swipe action with a visible button or menu for discoverability.
