Skip to main content
UI/UX components critical

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.

Tags

navigation accessibility mobile breadcrumbs skip-links keyboard aria

Discussion