Mobile App Navigation Patterns: Tab Bars, Drawers and Gestures

Navigation is how people find their way around your app. When it works, nobody notices. When it does not, users feel lost and leave. Because phones have small screens and are often used one-handed, choosing the right navigation pattern is one of the most important structural decisions in mobile design.

Start with your information architecture

Before choosing a pattern, list the main areas of the app and how often people use each. Group related content and decide the top-level destinations, usually three to five. Navigation should reflect how users think about the product, not how your team is organised.

Pattern 1: Bottom tab bar

A row of icons (with labels) fixed at the bottom of the screen, each leading to a top-level section.

• Pros: always visible, easy to reach with a thumb, shows where you are
• Cons: limited to a few items, usually three to five
• Best for: apps with a small set of equally important sections, such as home, search, messages and profile

Both iOS and Android design guidance favour a bottom bar for primary navigation. Always include text labels, since icons alone are often ambiguous. Keep the bar consistent across screens and highlight the active tab.

Pattern 2: Navigation drawer (hamburger menu)

A panel that slides in from the side, usually opened with a menu icon.

• Pros: holds many destinations, keeps the main screen uncluttered
• Cons: hides options, which tends to reduce discovery and use; hard to reach on large phones
• Best for: secondary destinations like settings, help and account, or apps with many sections

If most important features sit behind a drawer, consider whether they should move to a tab bar.

Pattern 3: Stack (hierarchical) navigation

Screens are pushed on top of each other as you drill into content, with a back button or swipe gesture to return.

• Pros: natural for moving from lists to details
• Cons: deep stacks make users lose context
• Best for: content that follows a clear hierarchy, such as inbox to message, or product list to product page

Keep the back path predictable and support the platform’s standard back behaviour.

Pattern 4: Top tabs

Tabs across the top, often scrollable, that switch between related views within a section.

• Pros: good for filtering or switching views of the same type of content
• Cons: harder to reach, and swiping between tabs can conflict with other gestures
• Best for: sub-navigation inside a screen, not primary navigation

Pattern 5: Gesture-based navigation

Swipes, pulls and long presses that trigger actions or movement, such as swiping to archive an email or pulling down to refresh.

• Pros: fast and fluid for experienced users
• Cons: invisible, so users may never discover them
• Best for: shortcuts that duplicate visible controls

Never make a gesture the only way to do something important. Provide a visible alternative, which also helps people who cannot perform certain gestures. See our accessibility basics.

Pattern 6: Floating action button and contextual actions

A prominent button that triggers the main action on a screen, such as composing a message.

• Pros: highlights the primary action
• Cons: can cover content, and works only when there is one clear main action

Pattern 7: Search-first navigation

When content is vast, a prominent search bar becomes the main way in, often combined with recent items and suggestions. Good for marketplaces, media libraries and reference apps.

Choosing a pattern

Situation	Suggested approach
3 to 5 key sections used often	Bottom tab bar
Many lower-priority destinations	Tab bar plus a “More” or profile menu
Content with clear drill-down	Stack navigation
Views of the same data	Top tabs or segmented control
Huge catalogue	Search-first with browsing categories

You can combine patterns: a bottom tab bar for top-level areas, stack navigation inside each, and top tabs for sub-views.

Design details that matter

• Label everything. Short, plain words beat clever ones.
• Show current location with clear active states and screen titles.
• Keep it consistent so users learn once.
• Respect thumb zones. Place frequent actions where thumbs reach easily.
• Support platform conventions, such as the system back gesture.
• Avoid hiding core features behind menus.
• Make touch targets large enough.
• Handle deep links and state restoration so users return where they left off.

Test your navigation

Ask five people to find specific things without help, such as “change your notification settings” or “find last week’s order”. Watch where they hesitate. Our usability testing guide shows how. Also review analytics to see which sections get used and which are ignored.

Common mistakes

• Too many tabs
• Icons without labels
• Hiding important features in a drawer
• Inconsistent behaviour between screens
• Relying only on gestures

Checklist

• Top-level destinations limited to 3 to 5
• Bottom tabs have icons and text labels
• Secondary items placed in a menu or profile area
• Back behaviour is predictable
• Gestures have visible alternatives
• Current location always clear
• Tested with real users

Final thoughts

Good navigation is invisible: people simply get where they want to go. Start from user needs, pick the simplest pattern that fits, and test it. If you want help designing structure and flows for your app, see our UI/UX design service or contact us.