Design Navigation Patterns

Select the navigation pattern that matches content depth and device context, label it with nouns, mark the active state clearly, and add wayfinding cues when depth exceeds two levels.

Why This Is Best Practice

Adopted by: Apple HIG specifies tab bars, navigation bars, and sidebars for distinct use cases — not interchangeably; Google Material Design 3 (2022) defines Navigation Bar (mobile), Navigation Drawer (desktop/tablet), and Navigation Rail as distinct patterns with documented triggers; all major design systems (IBM Carbon, Shopify Polaris, Atlassian Design System) encode navigation patterns with platform-specific variants; NNG's Navigation Design guideline is the most-cited UX research authority on navigation structure Impact: NNG (Budiu, 2020) identifies navigation as the #1 usability problem area on websites — more than search, content, or layout; Baymard Institute's mobile navigation research (2021) found that mobile hamburger menus reduce navigation discoverability by 44% compared to persistent tab bars; Nielsen's original Usability Engineering (1993) identifies clear navigation as the strongest predictor of learnability across all digital products Why best: Navigation pattern selection is not an aesthetic choice — it determines how many taps/clicks a user needs to reach any content, whether users can orient themselves within the IA, and whether mobile users can reach navigation with one thumb; the alternative of applying a single pattern universally (e.g., hamburger for all devices) is consistently the highest-impact navigation mistake documented in NNG and Baymard research

Sources: NNG "Navigation Design: Almost Everything You Need to Know" (Budiu, 2020); Apple Human Interface Guidelines "Navigation Bars" + "Tab Bars" (2023); Google Material Design 3 "Navigation" (2022); Baymard Institute "Mobile Navigation UX" (2021)

Steps

1. Map content depth and choose the primary pattern

Count the number of top-level sections and the maximum navigation depth: