name	mobile-nav-patterns
description	Use when designing mobile navigation for a marketing site or web app. Covers hamburger vs bottom-tab vs slide-out, the gesture patterns, and the back-button behavior.

Mobile Nav Patterns

Mobile nav is the most-touched UI in the app. Get the gestures right.

Hamburger menu

Top-left icon. Slide-from-left drawer with nav list. Covers ~80% of screen. Tap outside or X to dismiss.

Bottom tab bar

For apps with 3-5 core destinations. Always visible. Active tab highlighted.

Full-screen overlay

Modern marketing sites. Hamburger expands to fullscreen menu with large nav links.

Back button

Browser back works. Plus in-app back-arrow at top-left of sub-pages.

Common mistakes

Hamburger with 12 items (too many — split into categories). Bottom tab bar with 7+ tabs (cramped). Mobile nav that requires double-tap. Hamburger AND bottom tab (redundant).

Where this fits in X3 Compass

Applied across the X3 Compass design system.

name	mobile-nav-patterns
description	Use when designing mobile navigation for a marketing site or web app. Covers hamburger vs bottom-tab vs slide-out, the gesture patterns, and the back-button behavior.