NavigationDestination

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.

TheNavigationDestination interface of theNavigation API represents the destination being navigated to in the current navigation.

It is accessed via theNavigateEvent.destination property.

Instance properties

idRead only: Returns theid value of the destinationNavigationHistoryEntry if theNavigateEvent.navigationType istraverse, or an empty string otherwise.
indexRead only: Returns theindex value of the destinationNavigationHistoryEntry if theNavigateEvent.navigationType istraverse, or-1 otherwise.
keyRead only: Returns thekey value of the destinationNavigationHistoryEntry if theNavigateEvent.navigationType istraverse, or an empty string otherwise.
sameDocumentRead only: Returnstrue if the navigation is to the samedocument as the currentDocument value, orfalse otherwise.
urlRead only: Returns the URL being navigated to.

Instance methods

getState(): Returns a clone of the available state associated with the destinationNavigationHistoryEntry, or navigation operation (e.g.,navigate()) as appropriate.

Examples

navigation.addEventListener("navigate", (event) => {  // Exit early if this navigation shouldn't be intercepted,  // e.g. if the navigation is cross-origin, or a download request  if (shouldNotIntercept(event)) {    return;  }  // Returns a URL() object constructed from the  // NavigationDestination.url value  const url = new URL(event.destination.url);  if (url.pathname.startsWith("/articles/")) {    event.intercept({      async handler() {        // The URL has already changed, so show a placeholder while        // fetching the new content, such as a spinner or loading page        renderArticlePagePlaceholder();        // Fetch the new content and display when ready        const articleContent = await getArticleContent(url.pathname);        renderArticlePage(articleContent);      },    });  }});