Navigation API Playground - Online Single‑Page Router

The Navigation API is a modern browser API that provides a unified way to handle single‑page app (SPA) routing. It replaces the older History API and popstate events with a more powerful, promise‑based system. It exposes window.navigation, giving you access to navigate events, transition objects, history entries, and intercept capabilities — all in one cohesive interface.

Key advantages over the History API: 1) Full access to all history entries via navigation.entries() (not just the current one). 2) The navigate event fires for all same‑document navigations — push, replace, reload, traverse, and hash changes. 3) intercept() lets you take control of navigation asynchronously with proper abort signals. 4) navigation.transition gives real‑time access to in‑flight navigations. 5) Native traverseTo(key) for jumping to any history entry.

As of 2024, the Navigation API is supported in Chromium‑based browsers (Chrome 102+, Edge 102+, Opera 88+). Firefox and Safari have not yet shipped full support. You can track progress on Can I Use. For cross‑browser compatibility, consider using a polyfill or falling back to the History API with feature detection: if ('navigation' in window) { ... }.

event.intercept() is called inside the navigate event handler to take control of a navigation. It returns a transition object with from/to entries and a finished promise. You must call intercept() synchronously within the event handler. Use it to: render new UI without a full page reload, fetch data before committing the navigation, animate page transitions, or cancel navigations gracefully via AbortSignal. Example: event.intercept({ handler: async () => { await loadPage(event.destination.url); } });

navigation.transition is null when no navigation is in progress. During an intercepted navigation, it holds the active NavigationTransition object, which includes: navigationType (push/replace/reload/traverse), from (the source entry), to (the destination entry), finished (a promise that resolves when the navigation completes), and committed (a promise that resolves when the URL is committed). This is invaluable for showing loading spinners, progress bars, or blocking user input during navigation.

navigation.updateCurrentEntry({ state: { ... } }) updates the state of the current history entry without triggering a navigation or changing the URL. This is similar to history.replaceState() but cleaner — it only affects the state, not the URL. The state can later be retrieved via navigation.currentEntry.getState(). It's perfect for persisting UI state (scroll position, form data, filters) across back/forward navigations.

Yes! The URLPattern API (supported in Chromium 95+) pairs perfectly with the Navigation API. You can match destination URLs against patterns inside your navigate handler: const pattern = new URLPattern({ pathname: '/products/:id' }); then pattern.exec(event.destination.url) to extract parameters. This enables clean, express‑style routing without any third‑party library. Check the browser console in this playground — URLPattern matches are logged when available.