The W3C Navigation API (window.navigation, standard in Chromium browsers since version 102) modernizes client-side routing by providing a single, unified interface for all navigations. For over two decades, Single-Page Applications (SPAs) relied on the brittle HTML5 History API (history.pushState and popstate). The legacy History API had severe architectural flaws: popstate only fired on browser back/forward buttons (not on pushState calls), requiring router frameworks to monkey-patch native browser methods; it lacked any mechanism to intercept link clicks before network requests began; and it provided zero native cancellation for in-flight page fetches when users rapidly clicked between links.

When any navigation occurs (link click, form submission, or navigation.navigate()), the browser dispatches a "navigate" event. Inside the listener, developers call e.intercept({ async handler() { ... }, scroll: "after-transition", focusReset: "after-transition" }). The browser intercepts the navigation, immediately updates the address bar URL and browser history, keeps the browser loading UI active, and invokes the asynchronous handler. Once the handler promise resolves, the browser automatically scrolls the page to the target anchor or restores previous scroll position, and resets accessibility focus to the main container.

A classic bug in client-side routers occurs when a user clicks a slow link (e.g. /heavy-report taking 2 seconds) and immediately clicks a fast link (e.g. /dashboard taking 100ms). Under legacy routers, the slow fetch completes last and overwrites the dashboard with stale report data. The Navigation API solves this natively by attaching an AbortSignal to every event: e.signal. When a subsequent navigation occurs while a previous intercept handler is still executing, the browser automatically fires abort on the previous e.signal. Passing e.signal directly to fetch(url, { signal: e.signal }) instantly terminates the obsolete network request, guaranteeing strictly ordered, race-free state transitions.

The Navigation API provides full, transparent access to the session history stack via navigation.entries(). Each entry is a NavigationHistoryEntry instance containing: 1) key: a persistent, unique string identifying this slot across back/forward journeys; 2) id: an identifier unique to this specific visit; 3) url: the full target URL; 4) index: zero-based position in history; and 5) getState(): structured data stored via navigation.navigate(url, { state }). Developers can inspect the entire stack or navigate directly to arbitrary historical entries via navigation.traverseTo(entry.key).