NavigateEvent

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.

TheNavigateEvent interface of theNavigation API is the event object for thenavigate event, which fires whenany type of navigation is initiated (this includes usage ofHistory API features likeHistory.go()).NavigateEvent provides access to information about that navigation, and allows developers to intercept and control the navigation handling.

Constructor

NavigateEvent(): Creates a newNavigateEvent object instance.

Instance properties

Inherits properties from its parent,Event.

canInterceptRead only: Returnstrue if the navigation can be intercepted, orfalse otherwise (e.g., you can't intercept a cross-origin navigation).
destinationRead only: Returns aNavigationDestination object representing the destination being navigated to.
downloadRequestRead only: Returns the filename of the file requested for download, in the case of a download navigation (e.g., an<a> or<area> element with adownload attribute), ornull otherwise.
formDataRead only: Returns theFormData object representing the submitted data in the case of aPOST form submission, ornull otherwise.
hashChangeRead only: Returnstrue if the navigation is a fragment navigation (i.e., to a fragment identifier in the same document), orfalse otherwise.
hasUAVisualTransitionRead only: Returnstrue if the user agent performed a visual transition for this navigation before dispatching this event, orfalse otherwise.
infoRead only: Returns theinfo data value passed by the initiating navigation operation (e.g.,Navigation.back(), orNavigation.navigate()), orundefined if noinfo data was passed.
navigationTypeRead only: Returns the type of the navigation —push,reload,replace, ortraverse.
signalRead only: Returns anAbortSignal, which will become aborted if the navigation is cancelled (e.g., by the user pressing the browser's "Stop" button, or another navigation starting and thus cancelling the ongoing one).
sourceElementRead only: When the navigation was initiated by an element (for example clicking a link), returns anElement object representing the initiating element.
userInitiatedRead only: Returnstrue if the navigation was initiated by the user (e.g., by clicking a link, submitting a form, or pressing the browser's "Back"/"Forward" buttons), orfalse otherwise.

Instance methods

Inherits methods from its parent,Event.

intercept(): Intercepts this navigation, turning it into a same-document navigation to thedestination URL. It can accept handler functions that define what the navigation handling behavior should be, plusfocusReset andscroll options to enable or disable the browser's default focus and scrolling behavior as desired.
scroll(): Can be called to manually trigger the browser-driven scrolling behavior that occurs in response to the navigation, if you want it to happen before the navigation handling has completed.

Examples

Handling a navigation using`intercept()`

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;  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);      },    });  }});

Note:Before the Navigation API was available, to do something similar you'd have to listen for all click events on links, rune.preventDefault(), perform the appropriateHistory.pushState() call, then set up the page view based on the new URL. And this wouldn't handle all navigations — only user-initiated link clicks.

Handling scrolling using`scroll()`

In this example of intercepting a navigation, thehandler() function starts by fetching and rendering some article content, but then fetches and renders some secondary content afterwards. It makes sense to scroll the page to the main article content as soon as it is available so the user can interact with it, rather than waiting until the secondary content is also rendered. To achieve this, we have added ascroll() call between the two.

navigation.addEventListener("navigate", (event) => {  if (shouldNotIntercept(event)) return;  const url = new URL(event.destination.url);  if (url.pathname.startsWith("/articles/")) {    event.intercept({      async handler() {        const articleContent = await getArticleContent(url.pathname);        renderArticlePage(articleContent);        event.scroll();        const secondaryContent = await getSecondaryContent(url.pathname);        addSecondaryContent(secondaryContent);      },    });  }});

Specifications

Specification
HTML # the-navigateevent-interface

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified onJan 15, 2026 byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換