v145 · Web APIs · Navigation API

Navigation API: transition.destination

Chrome 145 adds destination to NavigationTransition. During an in-progress navigation, navigation.transition.destination exposes the NavigationDestination for the in-flight navigation — the same destination object available during the navigate event, now accessible from anywhere while the transition is live.

concepts

  1. SPA Transition Demo

    A simple hash-based SPA that logs navigation.transition info (including .destination) during each navigation. See how the destination URL and key are available immediately after a navigation commits.

  2. Transition Introspection

    Explores the full NavigationTransition object: navigationType, from, destination, and finished. Compares how destination in transition relates to the same property in the navigate event handler.

  3. Route Guard

    Subscribe to navigation.transition, read the destination, and block or redirect based on a fake unsaved-changes flag plus an admin-only route. Mirrors a real SPA router guard pattern.

  4. Navigation Progress Bar

    A progress bar that reads navigation.transition.destination from outside the navigate event — no shared closure needed. Shows how any module can inspect where the browser is going during an active transition.

why it shipped

Before Chrome 145, navigation.transition held only navigationType, from, and finished. To know where a navigation was going, code had to capture the destination inside the navigate event handler and store it in a variable. Adding destination directly to the transition object means any code — progress indicators, analytics hooks, view-transition coordinators — can read the in-progress destination without needing a shared closure.

the API

// After a navigation commits, navigation.transition is set
navigation.addEventListener('navigatesuccess', () => {
  const t = navigation.transition;
  if (!t) return;

  // Chrome 145+ — destination is available on the transition
  console.log(t.navigationType);         // 'push' | 'replace' | 'reload' | 'traverse'
  console.log(t.from.url);               // NavigationHistoryEntry — where we came from
  console.log(t.destination.url);        // NavigationDestination — where we went (Chrome 145+)
  console.log(t.destination.key);        // History entry key
  console.log(t.destination.index);      // Position in navigation history

  await t.finished; // Promise that resolves when all handlers complete
});

// During navigate event (the pre-145 way to access destination)
navigation.addEventListener('navigate', event => {
  event.destination.url;  // same as t.destination.url above
});

references