Mobile Navigation Patterns

Mobile navigation patterns all wrestle with the same fundamental trade-off: discoverability versus screen real estate. A horizontal tab bar, typically holding three to five items and staying visible at all times, maximizes discoverability, users can always see their options, but eats into a small screen's already limited space. A hamburger menu does the opposite: it hides the navigation behind a single icon, freeing up nearly the whole screen for content, at the direct cost of making those options invisible until someone taps to reveal them.

Accordions and navigation drawers with sequential, drill-down menus offer ways to manage deep hierarchies within a hidden menu once it's open. Hub-and-spoke navigation, common in mobile apps, presents a central hub screen linking out to individual features, with users returning to that hub between visits to each spoke.

A tab bar keeps everything visible but takes up space every single visitor pays for, whether they need it or not. A hamburger menu costs nothing visually until the moment someone actually needs to navigate, and then it costs them a tap, and a little bit of trust that the right option is even in there.

Exercise

The scenario: A recipe website is redesigning its mobile experience. The site has a moderately complex hierarchy, eight top-level cuisine categories, each with multiple subcategories, plus a secondary hierarchy organized by dietary requirement, cooking time, and occasion. The primary user behavior on mobile is exploratory browsing rather than known-item seeking, and the product team wants maximum content visibility on the home screen.

Two team members disagree: one wants a tab bar with five icons for quick access to top categories; the other wants a hamburger menu with accordions to accommodate the full depth of the hierarchy without cluttering the screen.

Given the emphasis on exploratory browsing and maximum content visibility, which approach fits better?
Try It With Your Data: Mobile Navigation Auditor

Fill in your own details below; the prompt updates as you type. When it's ready, copy it into Claude or whatever AI tool you use.

What this prompt does

Evaluate navigation structures specifically for mobile device constraints including thumb zones, screen size limitations, touch targets, and mobile-specific interaction patterns.

  • Auditing responsive navigation designs
  • Evaluating mobile-first documentation sites
  • Before launching mobile app documentation
  • When mobile analytics show high bounce rates
Paste your current navigation or sitemap
Pick the pattern you use.
Percentage of total traffic, e.g. 45
What users do on mobile
Known pain points, if any
Assembled prompt