v145 · Web APIs · SPA Transition Demo

SPA Transition Demo

Navigate between the tabs below. On each navigation, the panel logs the full navigation.transition snapshot — including .destination (the new Chrome 145 addition) — captured in the navigatesuccess handler.

Checking Navigation API support…

mini SPA

Home

Welcome to the demo SPA. Click any tab above to navigate — each navigation is intercepted by the Navigation API.

navigation.transition log

Navigate between tabs to see transition snapshots…

code

// Listen for every completed navigation
navigation.addEventListener('navigatesuccess', () => {
  const t = navigation.transition; // NavigationTransition | null
  if (!t) return;

  console.log('type:', t.navigationType);          // 'push' | 'replace' | 'traverse' | 'reload'
  console.log('from:', t.from?.url);               // Previous entry URL
  console.log('destination:', t.destination?.url); // New: Chrome 145+
  console.log('dest key:', t.destination?.key);    // History entry key
  console.log('dest index:', t.destination?.index);

  // Resolves when all navigate-event handlers complete
  t.finished.then(() => console.log('transition fully done'));
});

see also