Navigation Design Best Practices
Navigation patterns, mobile navigation, skip links, breadcrumbs, mega menus, and keyboard navigation based on WCAG 2.2, Nielsen Norman Group, Material Design 3, and WebAIM.
- Difficulty
- intermediate
- Read time
- 1 min read
- Version
- v1.0.0
- Confidence
- established
- Last updated
Quick Reference
Use semantic <nav> with aria-label for multiple navs. Add skip link as first focusable element. Use bottom navigation for 3-5 mobile destinations. Breadcrumbs need aria-current='page' and hidden separators. Keyboard: Tab between items, Arrow within menus, Escape to close.
Use When
- Designing site navigation structure
- Implementing mobile navigation patterns
- Creating breadcrumb trails
- Adding skip navigation links
- Building mega menus or dropdowns
Skip When
- In-page anchor navigation (use links)
- Pagination (different pattern)
Navigation Design Best Practices
Navigation patterns, mobile navigation, skip links, breadcrumbs, mega menus, and keyboard navigation based on WCAG 2.2, Nielsen Norman Group, Material Design 3, and WebAIM.