NavigationActivation

Baseline 2026

Newly available

Since January 2026, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

TheNavigationActivation interface of theNavigation API represents a recent cross-document navigation. It contains the navigation type and outgoing and inbound document history entries.

This object is accessed via thePageSwapEvent.activation andNavigation.activation properties. Note that, in each case, theNavigationActivation represents a different navigation:

Navigation.activation represents information about the navigation to the current page.
PageSwapEvent.activation represents information about the navigation to the next page.

Instance properties

entryRead only: Contains aNavigationHistoryEntry object representing the history entry for the inbound ("to") document in the navigation. This is equivalent to theNavigation.currentEntry property at the moment the inbound document was activated.
fromRead only: Contains aNavigationHistoryEntry object representing the history entry for the outgoing ("from") document in the navigation.
navigationTypeRead only: Contains a string indicating the type of navigation.

Examples

window.addEventListener("pagereveal", async (e) => {  // If the "from" history entry does not exist, return  if (!navigation.activation.from) return;  // Only run this if an active view transition exists  if (e.viewTransition) {    const fromUrl = new URL(navigation.activation.from.url);    const currentUrl = new URL(navigation.activation.entry.url);    // Went from profile page to homepage    // ~> Set VT names on the relevant list item    if (isProfilePage(fromUrl) && isHomePage(currentUrl)) {      const profile = extractProfileNameFromUrl(fromUrl);      // Set view-transition-name values on the elements to animate      document.querySelector(`#${profile} span`).style.viewTransitionName =        "name";      document.querySelector(`#${profile} img`).style.viewTransitionName =        "avatar";      // Remove names after snapshots have been taken      // so that we're ready for the next navigation      await e.viewTransition.ready;      document.querySelector(`#${profile} span`).style.viewTransitionName =        "none";      document.querySelector(`#${profile} img`).style.viewTransitionName =        "none";    }    // Went to profile page    // ~> Set VT names on the main title and image    if (isProfilePage(currentUrl)) {      // Set view-transition-name values on the elements to animate      document.querySelector(`#detail main h1`).style.viewTransitionName =        "name";      document.querySelector(`#detail main img`).style.viewTransitionName =        "avatar";      // Remove names after snapshots have been taken      // so that we're ready for the next navigation      await e.viewTransition.ready;      document.querySelector(`#detail main h1`).style.viewTransitionName =        "none";      document.querySelector(`#detail main img`).style.viewTransitionName =        "none";    }  }});

Note:SeeList of Chrome DevRel team members for the live demo this code is taken from.