Navigation Is Your App's Skeleton
Navigation determines how users move through your app, find content, and understand where they are. Poor navigation is the number one reason users abandon apps after the first session. Good navigation is invisible, meaning users never have to think about how to get somewhere.
In mobile apps, screen space is limited, which makes navigation design more challenging than on desktop. Every pixel used for navigation is a pixel not used for content.
Primary Navigation Patterns
Tab Bar (Bottom Navigation)
The most common pattern for apps with 3-5 top-level destinations. A persistent bar at the bottom of the screen with icons and optional labels.
iOS uses UITabBarController with a maximum of 5 tabs, always visible. Android uses NavigationBar (Material 3) with 3-5 destinations where a FAB can coexist.
Best for apps with equally important sections (social feeds, e-commerce, media players). Users should be able to jump between sections without losing state. Tapping the active tab should scroll to top or reset the stack. Include labels for accessibility.
Navigation Drawer (Hamburger Menu)
A panel that slides from the left edge containing 5+ destinations. Apple HIG does not recommend it for iOS. On Android, use modal drawer for phones and permanent drawer for tablets. Best for apps with many sections where not all are equally important.
The hamburger menu hides navigation behind an extra tap, reducing discoverability. If users frequently switch between sections, a tab bar is almost always the better choice.
Stack Navigation
Screens push onto and pop off a stack, creating a linear forward/backward flow. The back button or swipe gesture returns to the previous screen. Stack navigation is the backbone of nearly every app, usually combined with another primary pattern like tabs.
Modal Presentation
A screen that slides up on top of the current context, demanding attention or input. Use for self-contained tasks completable in 1-2 steps (compose a message, apply a filter, confirm a payment).
| Pattern | Destinations | Discoverability | State Preservation | Best For |
|---|---|---|---|---|
| Tab Bar | 3-5 | High | Yes (per tab) | Consumer apps |
| Drawer | 5+ | Low | No | Enterprise apps |
| Stack | Sequential | Medium | Back stack only | Drill-down flows |
| Modal | 1 task | N/A | No | Self-contained actions |
Deep Linking
Modern apps must handle deep links, meaning any screen should be reachable via a URL. Your navigation graph must be declarative. Any screen must be displayable without having navigated through parents. Universal Links (iOS) and App Links (Android) require matching web URLs. Push notifications must reconstruct the proper navigation stack.
Platform-Specific Conventions
iOS: Always support the swipe-back gesture. Use large titles for top-level screens, regular titles for secondary screens. Place primary actions in the navigation bar. Prefer sheets over full-screen modals for non-immersive tasks.
Android: The system back button must behave predictably (back means back, not close). Use the Navigation component for type-safe routing. Predictive back animations (Android 14+) require proper back handling. FABs suit primary creation actions.
Navigation for Large Screens
With foldables and tablets gaining market share, adaptive navigation is essential. Compact (phone) uses bottom tab bar plus stack. Medium (small tablet or foldable) uses navigation rail plus list-detail. Expanded (large tablet or desktop) uses permanent drawer plus multi-pane layout.
Build your navigation to adapt based on window size class rather than device type. A phone in landscape may qualify as "medium" width.
Common Navigation Mistakes
- Using a hamburger menu when a tab bar would be better
- Nesting more than 3-4 levels of stack navigation (users feel lost)
- Inconsistent back behavior across different screens
- Not preserving state when switching tabs (losing scroll position or draft content)
- Placing too many items in the bottom tab bar (6+ tabs never work)