NavigationActivation

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

This object is accessed via the PageSwapEvent.activation and Navigation.activation properties. Note that, in each case, the NavigationActivation 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

entry Read only Experimental: Contains a NavigationHistoryEntry object representing the history entry for the inbound ("to") document in the navigation. This is equivalent to the Navigation.currentEntry property at the moment the inbound document was activated.
from Read only Experimental: Contains a NavigationHistoryEntry object representing the history entry for the outgoing ("from") document in the navigation.
navigationType Read only Experimental: 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: See List of Chrome DevRel team members for the live demo this code is taken from.

Specifications

Specification
HTML Standard # navigationactivation

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`NavigationActivation`	123	123	No	109	No	123	No	82	No	No	123
`entry`	123	123	No	109	No	123	No	82	No	No	123
`from`	123	123	No	109	No	123	No	82	No	No	123
`navigationType`	123	123	No	109	No	123	No	82	No	No	123

Instance properties

Examples

Specifications

Browser compatibility

See also