Mobile UI Patterns Cheat Sheet

Navigation, gestures, and responsive layouts

Last Updated: November 21, 2025

Nav Patterns

Pattern Use
Bottom nav 3-5 top items
Drawer Secondary actions
Tabs Mode switch

Gestures

Swipe
Navigate/back
Pull to refresh
Trigger reload
Long press
Show contextual menu

Layout

Design for thumb reach, adapt typography, and maintain accessible contrast.

💡 Pro Tip: Test on physical devices, keep gestures discoverable, and maintain consistent spacing.
← Back to Web Dev & CSS | Browse all categories | View all cheat sheets