mobile-app-shell-patterns

name	mobile-app-shell-patterns
description	Use when designing the mobile app shell (or mobile-web equivalent). Covers tab bar, navigation drawer, header patterns, and the differences between native iOS, Android, and mobile-web.

Mobile App Shell Patterns

Mobile is its own design medium. Don't shrink desktop — design mobile-first.

Bottom tab bar

Standard for mobile apps. 3-5 tabs. Icon + label. Most-important destinations only.

Top header

Logo + page title (centered or left). Action buttons right. Sticky during scroll.

Hamburger drawer

When 5+ destinations needed. Slide-from-left. Includes nav + user info + sign-out.

Mobile-native vs web

Native iOS: SF Symbols icons, system fonts, native modal. Native Android: Material icons, Roboto, Material patterns. Mobile-web: choose iOS-style for consistency.

Common mistakes

Desktop nav scaled down (unusable). 7 tabs in tab bar. Hamburger menu on a 4-page app. Mobile-web that doesn't feel app-like (no tab bar, no native gestures).

Where this fits in X3 Compass

Applied across the X3 Compass design system.