NavigateEvent: NavigateEvent() constructor
==========================================

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

 The **`NavigateEvent()`** constructor creates a new
 `NavigateEvent` object instance.

Syntax
------


```js
new NavigateEvent(type, init)
```

### Parameters

`type`

A string representing the type of event. In the case of `NavigateEvent` this is always `navigate`.

`init`

An object containing the following properties:

`canIntercept` Optional

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 `NavigationDestination` object representing the location being navigated to.

`downloadRequest` Optional

The filename of the file requested for download, in the case of a download navigation (e.g. an `<a>` or `<area>` element with a `download` attribute). Defaults to `null`.

`formData` Optional

The `FormData` object representing the submitted data in the case of a `POST` form submission. Defaults to `null`.

`hashChange` Optional

A boolean defining if the navigation is a fragment navigation (i.e. to a fragment identifier in the same document). Defaults to `false`.

`info` Optional

The `info` data value passed by the initiating navigation operation (e.g. `Navigation.back()`, or `Navigation.navigate()`).

`navigationType` Optional

The type of the navigation. Possible values — `push`, `reload`, `replace`, and `traverse`. Defaults to `push`.

`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).

`userInitiated` Optional

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`.


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.


```js
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 Standard # the-navigateevent-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo