v145 · Web APIs · Transition Introspection

Transition Introspection

A complete reference for the NavigationTransition object — all properties, when they're available, and how destination (the Chrome 145 addition) compares to the same object available in the navigate event handler.

Key distinction: event.destination in the navigate handler is the same underlying NavigationDestination as navigation.transition.destination after commit. The difference is when you can access it — the transition property lets you read destination from any code running after commit without holding a closure over the navigate event.

NavigationTransition properties

Property Type Added Description
navigationType string Chrome 102 'push' | 'replace' | 'reload' | 'traverse'
from NavigationHistoryEntry Chrome 102 The entry we navigated away from
finished Promise<void> Chrome 102 Resolves when all navigate handlers complete
destination Chrome 145 NavigationDestination Chrome 145 The entry we navigated to — URL, key, index, state

two ways to access destination

Inside navigate event (pre-145 + 145+)

navigation.addEventListener('navigate', event => {
  // destination is always available here
  console.log(event.destination.url);
  console.log(event.destination.key);
  console.log(event.destination.index);
  // but only inside this handler
});

On navigation.transition (Chrome 145+)

navigation.addEventListener('navigatesuccess', () => {
  const t = navigation.transition;
  // destination readable from anywhere
  console.log(t.destination.url);   // same value
  console.log(t.destination.key);
  console.log(t.destination.index);
  // no closed-over event needed
});

live snapshot

Click a navigate button, then Snapshot to inspect transition…

when transition is null

// navigation.transition is null when no navigation is in progress
// It becomes non-null after a navigate event fires and stays set
// until the navigate handlers complete (transition.finished resolves)

// Check before reading:
function logDestination() {
  const t = navigation.transition;
  if (!t) { console.log('no active transition'); return; }
  // transition.destination is Chrome 145+
  console.log(t.destination?.url ?? 'destination not available');
}

see also