navigation.md•8.04 kB
# Navigation
> Mobile-first navigation patterns for modern web apps that work seamlessly across all devices.
<img src="https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/navigation-overview.png?fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=ead99d9ea625f48bb8bd3d5faa98497a" alt="navigation" data-og-width="4845" width="4845" data-og-height="1350" height="1350" data-path="images/design-guidelines/navigation-overview.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/navigation-overview.png?w=280&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=99512c99aa8ce4e2421b3634505eec3d 280w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/navigation-overview.png?w=560&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=be27185335fbcbcebf202d8850722fef 560w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/navigation-overview.png?w=840&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=32f1fb45d3af32b894a98f0dd9a5ddd9 840w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/navigation-overview.png?w=1100&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=9c137553d3d5e27c311007a68591cf64 1100w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/navigation-overview.png?w=1650&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=59c1e727985834ffc72ef90ea7fb5c32 1650w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/navigation-overview.png?w=2500&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=a45895de2407b8dc84f80640e4637ec8 2500w" />
## Best Practices
* **44px minimum touch targets**
* **Thumb-friendly placement**
* **Clear visual hierarchy**
* **Clear navigation states** to indicate to users where they are
* **Performance optimized** with smooth 60fps animations
* **State persistence** across page loads and sessions
## Common Patterns for Mobile Navigation
### Tab Navigation
<img src="https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/navigation-tab.png?fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=7733f7ddbc6fb67775ab6fbcf69e09df" alt="navigation" data-og-width="3771" width="3771" data-og-height="3156" height="3156" data-path="images/design-guidelines/navigation-tab.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/navigation-tab.png?w=280&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=41c005cb7c6858f8a341d471aade3bdf 280w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/navigation-tab.png?w=560&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=5f975efdcda2baea344aee563feb9889 560w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/navigation-tab.png?w=840&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=d17963f1869d09ed8122b6a573cd1cf0 840w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/navigation-tab.png?w=1100&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=7dc127ec67178115b4fa806d6f6849ce 1100w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/navigation-tab.png?w=1650&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=356eaa0de863ca96c69509d8fc5b6dc1 1650w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/navigation-tab.png?w=2500&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=ee54434561b772f3fc5118be94940b73 2500w" />
Bottom tab navigation is the most common pattern for mobile web apps, providing quick access to primary sections.
* **3-5 primary sections** maximum for optimal usability
* **Icon + label** combination for clear identification
* **Active state** clearly indicates current section
* **Badge indicators** for notifications and counts
### Sidebar
<img src="https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/navigation-sidebar.png?fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=1ddb83f7da91205215fb2c7516df53fc" alt="navigation" data-og-width="3771" width="3771" data-og-height="3156" height="3156" data-path="images/design-guidelines/navigation-sidebar.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/navigation-sidebar.png?w=280&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=1b879488ee3e53241c6462d78e07742c 280w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/navigation-sidebar.png?w=560&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=580900d38855eea42cde15b67ca142bc 560w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/navigation-sidebar.png?w=840&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=c9e6914bf42d819e097928c08db7a8c5 840w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/navigation-sidebar.png?w=1100&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=eb47a08991ddcf8abd3faef4fd99e95e 1100w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/navigation-sidebar.png?w=1650&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=50a35ee53e5322ce376225c01a7bbf2c 1650w, https://mintcdn.com/base-a060aa97/VOYxYmSegXCaAbF5/images/design-guidelines/navigation-sidebar.png?w=2500&fit=max&auto=format&n=VOYxYmSegXCaAbF5&q=85&s=1360ba8e74875e26aa9d2839d6bfdc3b 2500w" />
Hamburger menu navigation for secondary actions and less frequently used features.
* **Collapsible drawer** that slides out from the side
* **Clear hierarchy** organizing items by importance
* **Overlay design** that doesn't interfere with main content
* **Quick access** to search and user account features
## Common Mistakes
### Mobile-First Issues
* **Desktop-first thinking** - Starting with desktop navigation and scaling down
* **Insufficient touch targets** - Making buttons and links too small for mobile
* **Poor thumb reach** - Placing important actions outside comfortable thumb zones
* **Ignoring gestures** - Not leveraging native mobile interaction patterns
### Web App Specific Issues
* **URL synchronization** - Not keeping navigation state in sync with browser URL
* **Poor offline experience** - Navigation that breaks when network is unavailable
* **Inconsistent state** - Navigation state not persisting across page loads
* **Accessibility gaps** - Missing keyboard navigation and screen reader support
### Design Issues
* **Too many options** - Overwhelming navigation menus with too many choices
* **Unclear labels** - Vague or confusing navigation text
* **Inconsistent patterns** - Different navigation styles throughout the app
* **Poor visual hierarchy** - Not clearly showing importance and relationships
## Testing
### Device Testing
* **Real device testing** - Test on actual mobile devices, not just browser dev tools
* **Different screen sizes** - Test across various mobile screen sizes and orientations
* **Touch interaction** - Verify all touch targets work properly
* **Performance** - Check navigation performance on slower devices and networks
### User Experience Testing
* **One-handed usage** - Test navigation with single-hand operation
* **Thumb reach** - Verify all important actions are within comfortable reach
* **Gesture testing** - Ensure swipe and other gestures work as expected
* **Accessibility testing** - Test with screen readers and keyboard navigation
### Usability Testing
* **Task completion** - Observe users completing common navigation tasks
* **Error rates** - Track mis-taps and navigation errors
* **Time to complete** - Measure how quickly users can navigate to key features
* **User feedback** - Gather qualitative feedback on navigation clarity and ease of use
### Tools and Resources
* **Chrome DevTools** - Mobile device simulation and performance testing
* **Lighthouse** - PWA and mobile performance auditing
* **axe DevTools** - Accessibility testing for mobile
* **BrowserStack** - Cross-device testing platform
* **Figma Mobile** - Mobile-specific design templates and components