NavigateEvent: NavigateEvent() constructor
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.
The NavigateEvent() constructor creates a new NavigateEvent object instance.
Syntax
new NavigateEvent(type, init)
Parameters
type-
A string representing the type of event.
init-
An object that, in addition to the properties defined in
Event(), has the following properties:canInterceptOptional-
A boolean defining whether the navigation can be intercepted or not (e.g., you can't intercept a cross-origin navigation). Defaults to
false. destination-
A
NavigationDestinationobject representing the location being navigated to. downloadRequestOptional-
The filename of the file requested for download, in the case of a download navigation (e.g., an
<a>or<area>element with adownloadattribute). Defaults tonull. formDataOptional-
The
FormDataobject representing the submitted data in the case of aPOSTform submission. Defaults tonull. hashChangeOptional-
A boolean defining if the navigation is a fragment navigation (i.e., to a fragment identifier in the same document). Defaults to
false. hasUAVisualTransitionOptional-
A boolean defining whether the user agent has performed a visual transition for this navigation before dispatching this event. Defaults to
false. infoOptional-
The
infodata value passed by the initiating navigation operation (e.g.,Navigation.back(), orNavigation.navigate()). -
The type of the navigation. Possible values —
push,reload,replace, andtraverse. Defaults topush. signal-
An
AbortSignal, 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). sourceElementOptional-
An
Elementobject representing the initiating element in cases where the navigation was initiated by an element, ornullif the navigation was not initiated by an element. Defaults tonull. userInitiatedOptional-
A boolean defining whether the navigation was initiated by the user (e.g., by clicking a link, submitting a form, or pressing the browser's "Back"/"Forward" buttons). Defaults to
false.
Return value
A new NavigateEvent object.
Examples
A developer would not use this constructor manually. A new NavigateEvent object is constructed when a handler is invoked as a result of the navigate event firing.
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);
},
});
}
});
Specifications
| Specification |
|---|
| HTML # the-navigateevent-interface |