7 min read
0%

Navigation API

Back to Blog Interop 2026
Navigation API

Navigation API

The Navigation API matters because most router problems are really browser-history problems. Interop 2026 is about making interceptable navigations, history entries, and document lifecycle behavior consistent enough that app routers stop reverse-engineering them.

navigation.addEventListener('navigate', (event) => {
  if (!event.canIntercept || event.hashChange) {
    return;
  }

  event.intercept({
    async handler() {
      const html = await fetch(event.destination.url).then((res) => res.text());
      swapInPage(html);
    },
  });
});

The Main Win Is Browser-Owned History

Instead of pretending every click is a bespoke AJAX request, you work with a real navigation object that already knows about destination, traversal, replace vs push, and other semantics your router normally has to infer.

It Pairs Naturally with View Transitions

Navigation interception plus view transitions is the clean route-change stack the platform has been missing. One layer handles history and document movement; the other handles how that movement looks.

Let the Browser Keep Owning Scroll and Focus

The API is most valuable when you resist the urge to recreate all default browser behavior in userland. Override only what your app truly needs and let the platform keep handling the rest.

Practical Rollout

Guard on navigation support and keep your existing router path available. The point is not to fork the entire app; it is to move the browsers that support it onto a cleaner contract.


Browser support snapshot

Live support matrix for wf-navigation from Can I Use.

Show static fallback image Data on support for wf-navigation across major browsers from caniuse.com

Source: caniuse.com

Canvas is not supported in your browser