Navigation Patterns
Documented patterns for primary, secondary, and utility navigation across breakpoints.
Primary navigation
Primary navigation exposes the top-level sections of a site or application. It should contain no more than seven items — cognitive research consistently shows that recall drops sharply beyond this. On desktop, primary navigation lives in a persistent horizontal bar. On mobile, it collapses to a drawer or sheet triggered by a single visible affordance (hamburger or equivalent).
Secondary navigation
Secondary navigation provides within-section wayfinding. It should be visually subordinate to primary navigation — lower contrast, smaller type, or indented position. Avoid rendering secondary navigation at the same visual weight as primary: the distinction between levels is itself a hierarchy signal.
Utility navigation
Utility navigation contains account-level and cross-cutting actions: sign in, account settings, help, language selection. These are not discovery items — users who need them know to look for them. Position utility navigation at the far end of the primary bar (top-right on LTR layouts) and keep it to three or fewer items.
Breadcrumbs
Breadcrumbs are a secondary wayfinding pattern, not a replacement for clear primary navigation. Use them on pages more than two levels deep. The current page label in a breadcrumb should carry aria-current='page' and should not be a link. Every ancestor should be a link.
Mobile patterns
On narrow viewports, collapse primary navigation behind a single trigger. The collapsed menu should be full-width or full-screen — a narrow flyout on a narrow screen creates usability problems. Ensure the trigger target is at least 44×44px and carries a visible label in addition to any icon.
Field Notes in your inbox
Practical observations on design systems, component architecture, and UX methodology. No promotional content. Published when there is something worth saying.