Back to docs

Recipe: Mobile navigation patterns

A collection of battle-tested mobile navigation patterns used across Meridian's dashboard and public surfaces. Each pattern includes trade-offs, touch-target sizing, and animation budget guidance.

Bottom sheet menu

Full-height overlay with backdrop blur. Best for 3–6 primary actions. Dismiss on swipe-down or tap-outside.

Pros

  • • Large touch targets
  • • Natural thumb zone
  • • Clear hierarchy

Cons

  • • Blocks content fully
  • • Requires gesture handling

Floating action bar

Fixed bottom bar with 2–4 icon buttons. Stays visible during scroll. Use for persistent actions like create, search, filter.

Pros

  • • Always accessible
  • • Low cognitive load

Cons

  • • Limited slot count
  • • Can obscure content

Hamburger + slide-out drawer

Classic pattern for secondary navigation. Drawer slides from left, pushes or overlays content. Keep items under 8.

Pros

  • • Familiar to users
  • • Scales well

Cons

  • • Hidden discoverability
  • • Gesture conflicts

Tab bar (top or bottom)

3–5 top-level destinations. Bottom placement wins on thumb reach; top placement wins on scanability.

Pros

  • • Instant switching
  • • Clear IA

Cons

  • • Fixed real estate
  • • Max 5 items

Touch target sizing

  • • Minimum tappable area: 44×44px (WCAG 2.5.5)
  • • Preferred: 48×48px for thumb-driven UIs
  • • Spacing between adjacent targets: ≥8px
  • • Extend hit area with invisible padding, not larger icons