---
title: "Navigation | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

# Interface Navigation

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.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Navigation)

interface Navigation {  
    [activation](#activation): [NavigationActivation](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationActivation/) | null;  
    [canGoBack](#cangoback): boolean;  
    [canGoForward](#cangoforward): boolean;  
    [currentEntry](#currententry): [NavigationHistoryEntry](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationHistoryEntry/) | null;  
    [oncurrententrychange](#oncurrententrychange):  
        | ((this: Navigation, ev: [NavigationCurrentEntryChangeEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationCurrentEntryChangeEvent/)) \=> any)  
        | null;  
    [onnavigate](#onnavigate): ((this: Navigation, ev: [NavigateEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigateEvent/)) \=> any) | null;  
    [onnavigateerror](#onnavigateerror): ((this: Navigation, ev: ErrorEvent) \=> any) | null;  
    [onnavigatesuccess](#onnavigatesuccess): ((this: Navigation, ev: Event) \=> any) | null;  
    [transition](#transition): [NavigationTransition](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationTransition/) | null;  
    [addEventListener](#addeventlistener-1)<[K](#addeventlistenerk) extends keyof [NavigationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationEventMap/)\>(  
        type: [K](#addeventlistenerk),  
        listener: (this: Navigation, ev: [NavigationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationEventMap/)\[[K](#addeventlistenerk)\]) \=> any,  
        options?: boolean | AddEventListenerOptions,  
    ): void;  
    [addEventListener](#addeventlistener-2)(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | AddEventListenerOptions,  
    ): void;  
    [back](#back-1)(options?: [NavigationOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationOptions/)): [NavigationResult](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationResult/);  
    [dispatchEvent](#dispatchevent-1)(event: Event): boolean;  
    [entries](#entries-1)(): [NavigationHistoryEntry](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationHistoryEntry/)\[\];  
    [forward](#forward-1)(options?: [NavigationOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationOptions/)): [NavigationResult](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationResult/);  
    [navigate](#navigate-1)(  
        url: string | URL,  
        options?: [NavigationNavigateOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationNavigateOptions/),  
    ): [NavigationResult](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationResult/);  
    [reload](#reload-1)(options?: [NavigationReloadOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationReloadOptions/)): [NavigationResult](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationResult/);  
    [removeEventListener](#removeeventlistener-1)<[K](#removeeventlistenerk) extends keyof [NavigationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationEventMap/)\>(  
        type: [K](#removeeventlistenerk),  
        listener: (this: Navigation, ev: [NavigationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationEventMap/)\[[K](#removeeventlistenerk)\]) \=> any,  
        options?: boolean | EventListenerOptions,  
    ): void;  
    [removeEventListener](#removeeventlistener-2)(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | EventListenerOptions,  
    ): void;  
    [traverseTo](#traverseto-1)(key: string, options?: [NavigationOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationOptions/)): [NavigationResult](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationResult/);  
    [updateCurrentEntry](#updatecurrententry-1)(options: [NavigationUpdateCurrentEntryOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationUpdateCurrentEntryOptions/)): void;  
}

#### Hierarchy

-   EventTarget
    -   Navigation

##### Index

### Properties[](#properties)

[activation](#activation) [canGoBack](#cangoback) [canGoForward](#cangoforward) [currentEntry](#currententry) [oncurrententrychange](#oncurrententrychange) [onnavigate](#onnavigate) [onnavigateerror](#onnavigateerror) [onnavigatesuccess](#onnavigatesuccess) [transition](#transition)

### Methods[](#methods)

[addEventListener](#addeventlistener) [back](#back) [dispatchEvent](#dispatchevent) [entries](#entries) [forward](#forward) [navigate](#navigate) [reload](#reload) [removeEventListener](#removeeventlistener) [traverseTo](#traverseto) [updateCurrentEntry](#updatecurrententry)

## Properties[](#properties-1)

### `Readonly`activation[](#activation)

activation: [NavigationActivation](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationActivation/) | null

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.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Navigation/activation)

### `Readonly`canGoBack[](#cangoback)

canGoBack: boolean

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 currentEntry is not the first one in the history entry list), and false if it is not.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Navigation/canGoBack)

### `Readonly`canGoForward[](#cangoforward)

canGoForward: boolean

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 currentEntry is not the last one in the history entry list), and false if it is not.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Navigation/canGoForward)

### `Readonly`currentEntry[](#currententry)

currentEntry: [NavigationHistoryEntry](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationHistoryEntry/) | null

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

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Navigation/currentEntry)

### oncurrententrychange[](#oncurrententrychange)

oncurrententrychange:  
    | ((this: Navigation, ev: [NavigationCurrentEntryChangeEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationCurrentEntryChangeEvent/)) \=> any)  
    | null

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Navigation/currententrychange_event)

### onnavigate[](#onnavigate)

onnavigate: ((this: Navigation, ev: [NavigateEvent](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigateEvent/)) \=> any) | null

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Navigation/navigate_event)

### onnavigateerror[](#onnavigateerror)

onnavigateerror: ((this: Navigation, ev: ErrorEvent) \=> any) | null

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Navigation/navigateerror_event)

### onnavigatesuccess[](#onnavigatesuccess)

onnavigatesuccess: ((this: Navigation, ev: Event) \=> any) | null

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Navigation/navigatesuccess_event)

### `Readonly`transition[](#transition)

transition: [NavigationTransition](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationTransition/) | null

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.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Navigation/transition)

## Methods[](#methods-1)

### addEventListener[](#addeventlistener)

-   addEventListener<[K](#addeventlistenerk) extends keyof [NavigationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationEventMap/)\>(  
        type: [K](#addeventlistenerk),  
        listener: (this: Navigation, ev: [NavigationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationEventMap/)\[[K](#addeventlistenerk)\]) \=> any,  
        options?: boolean | AddEventListenerOptions,  
    ): void[](#addeventlistener-1)
    
    The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)
    
    #### Type Parameters
    
    -   K extends keyof [NavigationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationEventMap/)
    
    #### Parameters
    
    -   type: [K](#addeventlistenerk)
    -   listener: (this: Navigation, ev: [NavigationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationEventMap/)\[[K](#addeventlistenerk)\]) \=> any
    -   `Optional`options: boolean | AddEventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.addEventListener
    
-   addEventListener(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | AddEventListenerOptions,  
    ): void[](#addeventlistener-2)
    
    The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)
    
    #### Parameters
    
    -   type: string
    -   listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/)
    -   `Optional`options: boolean | AddEventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.addEventListener
    

### back[](#back)

-   back(options?: [NavigationOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationOptions/)): [NavigationResult](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationResult/)[](#back-1)
    
    The **`back()`** method of the Navigation interface navigates backwards by one entry in the navigation history.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Navigation/back)
    
    #### Parameters
    
    -   `Optional`options: [NavigationOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationOptions/)
    
    #### Returns [NavigationResult](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationResult/)
    

### dispatchEvent[](#dispatchevent)

-   dispatchEvent(event: Event): boolean[](#dispatchevent-1)
    
    The **`dispatchEvent()`** method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent().
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent)
    
    #### Parameters
    
    -   event: Event
    
    #### Returns boolean
    
    Inherited from EventTarget.dispatchEvent
    

### entries[](#entries)

-   entries(): [NavigationHistoryEntry](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationHistoryEntry/)\[\][](#entries-1)
    
    The **`entries()`** method of the Navigation interface returns an array of NavigationHistoryEntry objects representing all existing history entries.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Navigation/entries)
    
    #### Returns [NavigationHistoryEntry](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationHistoryEntry/)\[\]
    

### forward[](#forward)

-   forward(options?: [NavigationOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationOptions/)): [NavigationResult](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationResult/)[](#forward-1)
    
    The **`forward()`** method of the Navigation interface navigates forwards by one entry in the navigation history.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Navigation/forward)
    
    #### Parameters
    
    -   `Optional`options: [NavigationOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationOptions/)
    
    #### Returns [NavigationResult](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationResult/)
    

### navigate[](#navigate)

-   navigate(  
        url: string | URL,  
        options?: [NavigationNavigateOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationNavigateOptions/),  
    ): [NavigationResult](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationResult/)[](#navigate-1)
    
    The **`navigate()`** method of the Navigation interface navigates to a specific URL, updating any provided state in the history entries list.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Navigation/navigate)
    
    #### Parameters
    
    -   url: string | URL
    -   `Optional`options: [NavigationNavigateOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationNavigateOptions/)
    
    #### Returns [NavigationResult](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationResult/)
    

### reload[](#reload)

-   reload(options?: [NavigationReloadOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationReloadOptions/)): [NavigationResult](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationResult/)[](#reload-1)
    
    The **`reload()`** method of the Navigation interface reloads the current URL, updating any provided state in the history entries list.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Navigation/reload)
    
    #### Parameters
    
    -   `Optional`options: [NavigationReloadOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationReloadOptions/)
    
    #### Returns [NavigationResult](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationResult/)
    

### removeEventListener[](#removeeventlistener)

-   removeEventListener<[K](#removeeventlistenerk) extends keyof [NavigationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationEventMap/)\>(  
        type: [K](#removeeventlistenerk),  
        listener: (this: Navigation, ev: [NavigationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationEventMap/)\[[K](#removeeventlistenerk)\]) \=> any,  
        options?: boolean | EventListenerOptions,  
    ): void[](#removeeventlistener-1)
    
    The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target. The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)
    
    #### Type Parameters
    
    -   K extends keyof [NavigationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationEventMap/)
    
    #### Parameters
    
    -   type: [K](#removeeventlistenerk)
    -   listener: (this: Navigation, ev: [NavigationEventMap](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationEventMap/)\[[K](#removeeventlistenerk)\]) \=> any
    -   `Optional`options: boolean | EventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.removeEventListener
    
-   removeEventListener(  
        type: string,  
        listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/),  
        options?: boolean | EventListenerOptions,  
    ): void[](#removeeventlistener-2)
    
    The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target. The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)
    
    #### Parameters
    
    -   type: string
    -   listener: [EventListenerOrEventListenerObject](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.EventListenerOrEventListenerObject/)
    -   `Optional`options: boolean | EventListenerOptions
    
    #### Returns void
    
    Overrides EventTarget.removeEventListener
    

### traverseTo[](#traverseto)

-   traverseTo(key: string, options?: [NavigationOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationOptions/)): [NavigationResult](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationResult/)[](#traverseto-1)
    
    The **`traverseTo()`** method of the Navigation interface navigates to the NavigationHistoryEntry identified by the given key.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Navigation/traverseTo)
    
    #### Parameters
    
    -   key: string
    -   `Optional`options: [NavigationOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationOptions/)
    
    #### Returns [NavigationResult](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationResult/)
    

### updateCurrentEntry[](#updatecurrententry)

-   updateCurrentEntry(options: [NavigationUpdateCurrentEntryOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationUpdateCurrentEntryOptions/)): void[](#updatecurrententry-1)
    
    The **`updateCurrentEntry()`** method of the Navigation interface updates the state of the currentEntry; used in cases where the state change will be independent of a navigation or reload.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/Navigation/updateCurrentEntry)
    
    #### Parameters
    
    -   options: [NavigationUpdateCurrentEntryOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.NavigationUpdateCurrentEntryOptions/)
    
    #### Returns void