Navigation

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

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

It is accessed via theWindow.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 olderHistory API.

Instance properties

Inherits properties from its parent,EventTarget.

activationRead onlyExperimental: Returns a NavigationActivation object containing information about the most recent cross-document navigation, which "activated" this Document.
canGoBackRead onlyExperimental: Returnstrue if it is possible to navigate backwards in the navigation history(i.e., the currentEntry is not the first one in the history entry list),andfalse if it is not.
canGoForwardRead onlyExperimental: Returnstrue if it is possible to navigate forwards in the navigation history(i.e., the currentEntry is not the last one in the history entry list),andfalse if it is not.
currentEntryRead onlyExperimental: Returns a NavigationHistoryEntry object representing the location the user is currentlynavigated to right now.
transitionRead onlyExperimental: Returns a NavigationTransition object representing the status of an in-progress navigation,which can be used to track it. Returnsnull if no navigation is currently in progress.

Instance methods

Inherits methods from its parent,EventTarget.

back()Experimental: Navigates backwards by one entry in the navigation history.
entries()Experimental: Returns an array of NavigationHistoryEntry objects representing all existing history entries.
forward()Experimental: Navigates forwards by one entry in the navigation history.
navigate()Experimental: Navigates to a specific URL, updating any provided state in the history entries list.
reload()Experimental: Reloads the current URL, updating any provided state in the history entries list.
traverseTo()Experimental: Navigates to a specific NavigationHistoryEntry identified bykey.
updateCurrentEntry()Experimental: Updates the state of the currentEntry; usedin cases where the state change will be independent from a navigation or reload.

Events

Inherits events from its parent,EventTarget.

currententrychangeExperimental: Fired when the Navigation.currentEntry has changed.
navigateExperimental: Fired when any type of navigation is initiated, allowing you to intercept as required.
navigateerrorExperimental: Fired when a navigation fails.
navigatesuccessExperimental: Fired when a successful navigation has finished.

Examples

Moving forwards and backwards in the history

async function backHandler() {  if (navigation.canGoBack) {    await navigation.back().finished;    // Handle any required clean-up after    // navigation has finished  } else {    displayBanner("You are on the first page");  }}async function forwardHandler() {  if (navigation.canGoForward) {    await navigation.forward().finished;    // Handle any required clean-up after    // navigation has finished  } else {    displayBanner("You are on the last page");  }}

Traversing to a specific history entry

// On JS startup, get the key of the first loaded page// so the user can always go back there.const { key } = navigation.currentEntry;backToHomeButton.onclick = () => navigation.traverseTo(key);// Navigate away, but the button will always work.await navigation.navigate("/another_url").finished;

Navigating and updating state

navigation.navigate(url, { state: newState });

navigation.reload({ state: newState });

Or if the state is independent from a navigation or reload:

navigation.updateCurrentEntry({ state: newState });

Specifications

Specification
HTML # navigation-interface

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on⁨Jul 3, 2025⁩ byMDN contributors.

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

Movatterモバイル変換