Newly available Newly available. Verify your target environments before adopting.

Navigation API

The Navigation interface of the Navigation API allows control over all navigation actions for the current window in one central place, including initiating navigations programmatically, examining navigation history entries, and managing navigations as they happen.

It is accessed via the Window.navigation property.

The Navigation API only exposes history entries created in the current browsing context that have the same origin as the current page (e.g., not navigations inside embedded <iframe>s, or cross-origin navigations), providing an accurate list of all previous history entries just for your app. This makes traversing the history a much less fragile proposition than with the older History API.

EventTarget Navigation

Display and Navigation

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
Navigation
102
102
147
26.2
102
26.2
NavigateEvent

The NavigateEvent interface of the Navigation API is the event object for the Navigation/navigate_event event, which fires when any type of navigation is initiated (this includes usage of History API features like History.go()). NavigateEvent provides access to information about that navigation, and allows developers to intercept and control the navigation…
102
102
147
26.2
102
26.2
canIntercept

The canIntercept read-only property of the NavigateEvent interface returns true if the navigation can be intercepted and have its URL rewritten, or false otherwise
105
105
147
26.2
105
26.2
destination

The destination read-only property of the NavigateEvent interface returns a NavigationDestination object representing the destination being navigated to.
102
102
147
26.2
102
26.2
downloadRequest

The downloadRequest read-only property of the NavigateEvent interface returns 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), or null otherwise.
102
102
147
26.2
102
26.2
formData

The formData read-only property of the NavigateEvent interface returns the FormData object representing the submitted data in the case of a POST form submission, or null otherwise.
102
102
147
26.2
102
26.2
hashChange

The hashChange read-only property of the NavigateEvent interface returns true if the navigation is a fragment navigation (i.e., to a fragment identifier in the same document), or false otherwise.
102
102
147
26.2
102
26.2
hasUAVisualTransition

The hasUAVisualTransition read-only property of the NavigateEvent interface returns true if the user agent performed a visual transition for this navigation before dispatching this event, or false otherwise.
118
118
147
26.2
118
26.2
info

The info read-only property of the NavigateEvent interface returns the info data value passed by the initiating navigation operation (e.g., Navigation.back(), or Navigation.navigate()), or undefined if no info data was passed.
102
102
147
26.2
102
26.2
intercept

The intercept() method of the NavigateEvent interface intercepts this navigation, turning it into a same-document navigation to the NavigationDestination.url URL.
105
105
147
26.2
105
26.2
NavigateEvent

The NavigateEvent() constructor creates a new NavigateEvent object instance.
102
102
147
26.2
102
26.2
navigationType

The navigationType read-only property of the NavigateEvent interface returns the type of the navigation — push, reload, replace, or traverse.
102
102
147
26.2
102
26.2
scroll

The scroll() method of the NavigateEvent interface 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.
105
105
147
26.2
105
26.2
signal

The signal read-only property of the NavigateEvent interface returns 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).
102
102
147
26.2
102
26.2
userInitiated

The userInitiated read-only property of the NavigateEvent interface returns true 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), or false otherwise.
102
102
147
26.2
102
26.2
activation

The activation read-only property of the Navigation interface returns a NavigationActivation object containing information about the most recent cross-document navigation, which "activated" this Document. The property will stay constant during same-document navigations.
123
123
147
26.2
123
26.2
back

The back() method of the Navigation interface navigates backwards by one entry in the navigation history.
102
102
147
26.2
102
26.2
canGoBack

The canGoBack read-only property of the Navigation interface returns true if it is possible to navigate backwards in the navigation history (i.e., the Navigation.currentEntry is not the first one in the history entry list), and false if it is not.
102
102
147
26.2
102
26.2
canGoForward

The canGoForward read-only property of the Navigation interface returns true if it is possible to navigate forwards in the navigation history (i.e., the Navigation.currentEntry is not the last one in the history entry list), and false if it is not.
102
102
147
26.2
102
26.2
currentEntry

The currentEntry read-only property of the Navigation interface returns a NavigationHistoryEntry object representing the location the user is currently navigated to right now.
102
102
147
26.2
102
26.2
currententrychange_event

The currententrychange event of the Navigation interface is fired when the Navigation.currentEntry has changed.
102
102
147
26.2
102
26.2
entries

The entries() method of the Navigation interface returns an array of NavigationHistoryEntry objects representing all existing history entries.
102
102
147
26.2
102
26.2
forward

The forward() method of the Navigation interface navigates forwards by one entry in the navigation history.
102
102
147
26.2
102
26.2
navigate

The navigate() method of the Navigation interface navigates to a specific URL, updating any provided state in the history entries list.
102
102
147
26.2
102
26.2
navigate_event

The navigate event of the Navigation interface is fired when any type of navigation is initiated, allowing you to intercept as required.
102
102
147
26.2
102
26.2
navigateerror_event

The navigateerror event of the Navigation interface is fired when a navigation fails.
102
102
147
26.2
102
26.2
navigatesuccess_event

The navigatesuccess event of the Navigation interface is fired when a successful navigation has finished.
102
102
147
26.2
102
26.2
reload

The reload() method of the Navigation interface reloads the current URL, updating any provided state in the history entries list.
102
102
147
26.2
102
26.2
transition

The transition read-only property of the Navigation interface returns a NavigationTransition object representing the status of an in-progress navigation, which can be used to track it.
102
102
147
26.2
102
26.2
traverseTo

The traverseTo() method of the Navigation interface navigates to the NavigationHistoryEntry identified by the given NavigationHistoryEntry.key.
102
102
147
26.2
102
26.2
updateCurrentEntry

The updateCurrentEntry() method of the Navigation interface updates the state of the Navigation.currentEntry; used in cases where the state change will be independent of a navigation or reload.
102
102
147
26.2
102
26.2
NavigationActivation

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.
123
123
147
26.2
123
26.2
entry

The entry read-only property of the NavigationActivation interface 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.
123
123
147
26.2
123
26.2
from

The from read-only property of the NavigationActivation interface contains a NavigationHistoryEntry object representing the history entry for the outgoing ("from") document in the navigation.
123
123
147
26.2
123
26.2
navigationType

The navigationType read-only property of the NavigationActivation interface contains a string indicating the type of navigation.
123
123
147
26.2
123
26.2
NavigationCurrentEntryChangeEvent

The NavigationCurrentEntryChangeEvent interface of the Navigation API is the event object for the Navigation/currententrychange_event event, which fires when the Navigation.currentEntry has changed.
102
102
147
26.2
102
26.2
from

The from read-only property of the NavigationCurrentEntryChangeEvent interface returns the NavigationHistoryEntry that was navigated from.
102
102
147
26.2
102
26.2
NavigationCurrentEntryChangeEvent

The NavigationCurrentEntryChangeEvent() constructor creates a new NavigationCurrentEntryChangeEvent object.
102
102
147
26.2
102
26.2
navigationType

The navigationType read-only property of the NavigationCurrentEntryChangeEvent interface returns the type of the navigation that resulted in the change. The property may be null if the change occurs due to Navigation.updateCurrentEntry().
102
102
147
26.2
102
26.2
NavigationDestination

The NavigationDestination interface of the Navigation API represents the destination being navigated to in the current navigation.
102
102
147
26.2
102
26.2
getState

The getState() method of the NavigationDestination interface returns a clone of the developer-supplied state associated with the destination NavigationHistoryEntry, or navigation operation (e.g., Navigation.navigate()) as appropriate.
102
102
147
26.2
102
26.2
id

The id read-only property of the NavigationDestination interface returns the NavigationHistoryEntry.id value of the destination NavigationHistoryEntry if the NavigateEvent.navigationType is traverse, or an empty string otherwise.
102
102
147
26.2
102
26.2
index

The index read-only property of the NavigationDestination interface returns the NavigationHistoryEntry.index value of the destination NavigationHistoryEntry if the NavigateEvent.navigationType is traverse, or -1 otherwise.
102
102
147
26.2
102
26.2
key

The key read-only property of the NavigationDestination interface returns the NavigationHistoryEntry.key value of the destination NavigationHistoryEntry if the NavigateEvent.navigationType is traverse, or an empty string otherwise.
102
102
147
26.2
102
26.2
sameDocument

The sameDocument read-only property of the NavigationDestination interface returns true if the navigation is to the same document as the current Document value, or false otherwise.
102
102
147
26.2
102
26.2
url

The url read-only property of the NavigationDestination interface returns the URL being navigated to.
102
102
147
26.2
102
26.2
NavigationHistoryEntry

The NavigationHistoryEntry interface of the Navigation API represents a single navigation history entry.
102
102
147
26.2
102
26.2
dispose_event

The dispose event of the NavigationHistoryEntry interface is fired when the entry is no longer part of the history entry list.
102
102
147
26.2
102
26.2
getState

The getState() method of the NavigationHistoryEntry interface returns a clone of the developer-supplied state associated with this history entry.
102
102
147
26.2
102
26.2
id

The id read-only property of the NavigationHistoryEntry interface returns the id of the history entry, or an empty string if current document is not fully active. This is a unique, UA-generated value that always represents a specific history entry, useful to correlate it with an external resource such as a storage cache.
102
102
147
26.2
102
26.2
index

The index read-only property of the NavigationHistoryEntry interface returns the index of the history entry in the history entries list (that is, the list returned by Navigation.entries()), or -1 if the entry does not appear in the list or if current document is not fully active.
102
102
147
26.2
102
26.2
key

The key read-only property of the NavigationHistoryEntry interface returns the key of the history entry, or an empty string if current document is not fully active. This is a unique, UA-generated value that represents the history entry's slot in the entries list. It is used to navigate that particular slot via Navigation.traverseTo(). The key will be reused…
102
102
147
26.2
102
26.2
sameDocument

The sameDocument read-only property of the NavigationHistoryEntry interface returns true if this history entry is for the same document as the current Document value and current document is fully active, or false otherwise.
102
102
147
26.2
102
26.2
url

The url read-only property of the NavigationHistoryEntry interface returns the absolute URL of this history entry. If the entry corresponds to a different Document than the current one (like sameDocument property is false), and that Document was fetched with a Referrer-Policy header set to no-referrer or origin, the property returns null. If current…
102
102
147
26.2
102
26.2
NavigationTransition

The NavigationTransition interface of the Navigation API represents an ongoing navigation — a navigation that hasn't yet reached the Navigation/navigatesuccessevent or Navigation/navigateerrorevent stage.
102
102
147
26.2
102
26.2
finished

The finished read-only property of the NavigationTransition interface returns a Promise that fulfills at the same time the Navigation/navigatesuccessevent event fires, or rejects at the same time the Navigation/navigateerrorevent event fires.
102
102
147
26.2
102
26.2
from

The from read-only property of the NavigationTransition interface returns the NavigationHistoryEntry that the transition is coming from.
102
102
147
26.2
102
26.2
navigationType

The navigationType read-only property of the NavigationTransition interface returns the type of the ongoing navigation.
102
102
147
26.2
102
26.2
navigation

The navigation read-only property of the Window interface returns the current window's associated Navigation object.
102
102
147
26.2
102
26.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: canTransition (102)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: canTransition (102)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: canTransition (102)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (108)
Implementation note
  • Previously available under a different name: transitionWhile (102)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (108)
Implementation note
  • Previously available under a different name: transitionWhile (102)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (108)
Implementation note
  • Previously available under a different name: transitionWhile (102)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (108)
Implementation note
  • Previously available under a different name: restoreScroll (102)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (108)
Implementation note
  • Previously available under a different name: restoreScroll (102)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (108)
Implementation note
  • Previously available under a different name: restoreScroll (102)
Notes 1 item(s)
Implementation note
  • Chrome allows `javascript:` URLs when calling `navigate()`, contrary to the specification (bug 439994590).
Notes 1 item(s)
Implementation note
  • Edge allows `javascript:` URLs when calling `navigate()`, contrary to the specification (bug 439994590).
Notes 1 item(s)
Implementation note
  • Chrome Android allows `javascript:` URLs when calling `navigate()`, contrary to the specification (bug 439994590).

Use cases

  • Using Navigation API

    The Navigation interface of the Navigation API allows control over all navigation actions for the current window in one central place, including initiating navigations programmatically, examining navigation history entries, and managing navigations as they happen.

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links