Back to Docs

Mobile Navigation Patterns

A curated reference of production-grade mobile nav recipes — bottom sheets, tab bars, floating menus, and gesture-driven drawers.

Bottom Tab Bar

Fixed-height bar anchored to the viewport bottom. Four to five icon‑label pairs with an active indicator. Use position: fixed; bottom: 0 and reserve safe-area padding for notched devices.

Home
Search
Cart
Profile

Floating Action Menu

A circular trigger pinned to the bottom‑right corner. Expands into a radial or vertical stack of secondary actions. Keep the hit target at least 48×48 px and animate with a 200 ms spring.

+
New PostUploadDraft

Bottom Sheet Drawer

A panel that slides up from the bottom edge, overlaying content with a scrim. Use a drag handle, snap points (25% / 50% / 90%), and lock body scroll while open.

Gesture‑Driven Side Drawer

Swipe‑from‑left panel that follows the finger during the gesture. Commit the drawer open when the finger passes 40% of the screen width. Close on backdrop tap or swipe‑back. Use touch-action: pan-y on the main content to avoid horizontal scroll fights.