---
title: Navigation API
description: The API provided to extensions to navigate to extensions or host page.
api_version: 2026-07
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/target-apis/platform-apis/navigation-api
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/target-apis/platform-apis/navigation-api.md
---

# Navigation API

The API provided to extensions to navigate to extensions or host page.

### Support Targets (24)

### Supported targets

* customer-account.​footer.​render-after
* customer-account.​order-index.​announcement.​render
* customer-account.​order-index.​block.​render
* customer-account.​order-status.​announcement.​render
* customer-account.​order-status.​block.​render
* customer-account.​order-status.​cart-line-item.​render-after
* customer-account.​order-status.​cart-line-list.​render-after
* customer-account.​order-status.​customer-information.​render-after
* customer-account.​order-status.​fulfillment-details.​render-after
* customer-account.​order-status.​payment-details.​render-after
* customer-account.​order-status.​return-details.​render-after
* customer-account.​order-status.​unfulfilled-items.​render-after
* customer-account.​order.​action.​menu-item.​render
* customer-account.​order.​action.​render
* customer-account.​order.​page.​render
* customer-account.​page.​render
* customer-account.​profile.​addresses.​render-after
* customer-account.​profile.​announcement.​render
* customer-account.​profile.​block.​render
* customer-account.​profile.​company-details.​render-after
* customer-account.​profile.​company-location-addresses.​render-after
* customer-account.​profile.​company-location-payment.​render-after
* customer-account.​profile.​company-location-staff.​render-after
* customer-account.​profile.​payment.​render-after

## Navigation

Navigation API for all extensions. [Refer to supported protocols](https://shopify.dev/docs/api/customer-account-ui-extensions/unstable#custom-protocols)

* **addEventListener**

  **(type: "currententrychange", cb: (event: NavigationCurrentEntryChangeEvent) => void) => void**

  **required**

* **currentEntry**

  **NavigationHistoryEntry**

  **required**

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

* **navigate**

  **NavigateFunction**

  **required**

  The navigate() method navigates to a specific URL, updating any provided state in the history entries list.

* **removeEventListener**

  **(type: "currententrychange", cb: (event: NavigationCurrentEntryChangeEvent) => void) => void**

  **required**

* **updateCurrentEntry**

  **(options: NavigationUpdateCurrentEntryOptions) => void**

  **required**

  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.

### NavigationCurrentEntryChangeEvent

The NavigationCurrentEntryChangeEvent interface of the Navigation API is the event object for the currententrychange event, which fires when the Navigation.currentEntry has changed.

* from

  Returns the NavigationHistoryEntry that was navigated from.

  ```ts
  NavigationHistoryEntry
  ```

* navigationType

  Returns the type of the navigation that resulted in the change.

  ```ts
  NavigationTypeString
  ```

### NavigationHistoryEntry

The NavigationHistoryEntry interface of the Navigation API represents a single navigation history entry.

* getState

  Returns a clone of the available state associated with this history entry.

  ```ts
  () => unknown
  ```

* key

  Returns the key of the history entry. This is a unique, UA-generated value that represents the history entry's slot in the entries list rather than the entry itself.

  ```ts
  string
  ```

* url

  Returns the URL of this history entry.

  ```ts
  string | null
  ```

### NavigationTypeString

An enumerated value representing the type of navigation.

```ts
'push' | 'replace' | 'traverse'
```

### NavigateFunction



### NavigationUpdateCurrentEntryOptions

* state

  ```ts
  unknown
  ```

Examples

### Examples

* #### Extension.jsx

  ##### Default

  ```jsx
  import '@shopify/ui-extensions/preact';
  import {render} from 'preact';

  export default async () => {
    render(<Extension />, document.body);
  };

  function Extension() {
    return (
      <s-button
        onClick={() => {
          navigation.navigate('extension://orders');
        }}
      >
        Navigate to orders path
      </s-button>
    );
  }
  ```