Navigation is the system of pathways users follow to reach content, and it has several distinct layers that work together. Global navigation appears on every page and supports orientation across the site; primary navigation sits at the top and usually exposes four to nine main sections; secondary navigation lives inside a section and gives access to related content without crowding the top; utility navigation handles site-wide controls like login, language, and search, typically top-right; footer navigation offers a comprehensive, sitemap-style link list and supports SEO and accessibility; contextual navigation consists of links inside content that enable lateral discovery; and supplemental navigation — search, indexes, and sitemaps — serves users who cannot or will not browse. Local navigation within a section lets people move around without returning to the global menu each time, which reduces friction during deep exploration, and cross-links help users move laterally when content belongs to more than one journey or use case.
Two structural trade-offs shape every navigation design: depth versus breadth. A deep IA has fewer items per level but more nested levels, while a broad IA exposes many choices at each level but few levels. Classical guidance cites Miller's "magical number \( 7 \pm 2 \)" and Hick's Law — that decision time grows with the logarithm of the number of choices, roughly \( \log_2(n) \) — suggesting grouping and chunking to keep options scannable. Modern critique notes that Miller's number is widely misapplied, and well-grouped, well-labeled navigation can comfortably exceed it. Fitts' Law — that reaching a target takes longer when it is small or distant — pushes toward large clickable areas and ample spacing. The old "users will leave after three clicks" rule is largely a myth, and depth matters less than clarity, though unusually deep paths to common goals often indicate structural problems.
Many concrete patterns implement these trade-offs. Mega menus expose many sub-options in a single large panel, useful for big IAs but hiding items behind hover. Tabbed navigation works for parallel sections of equal depth and fails when sections are uneven. Accordions save space but can hide content from search engines and reduce discoverability. Breadcrumbs support orientation by showing the path to the current page — location-based breadcrumbs reflect the hierarchy, path-based breadcrumbs reflect the user's click history, and attribute-based breadcrumbs (common in e-commerce) show the facets applied to filter results. Among result sets, pagination can take the form of numbered pages, infinite scroll, or a "load more" button; infinite scroll is great for browsing but terrible for findability and footer access, while "load more" balances browsing flow with the ability to reach the rest of the page.
On small screens, mobile-first IA and the thumb-friendly zone reshape the same patterns: bottom navigation puts primary items within easy thumb reach, while the hamburger menu debate continues — concealing primary nav behind an icon reduces clutter but generally hurts discoverability, especially on desktop, though on mobile hidden navigation is more accepted if key items are still surfaced. Responsive IA accommodates screen size by collapsing menus, reordering priorities, and simplifying complex tables. Eye-tracking research feeds directly into IA decisions: the F-pattern shows users skimming down the left and across the top, while the Z-pattern shows a top-left to top-right, diagonal, then left-to-right scan on simpler pages. Above-the-fold content still carries weight, though "the fold" matters less today than it once did, and IA should always support skim reading through clear headings, bullets, and hierarchy rather than assuming anyone will read word-for-word.