Choose a version:

Navigation

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

Anchor to navigationNavigation

Navigation API for all extensions. Refer to supported protocols

Anchor to addEventListener addEventListener (type: "currententrychange", cb: (event: ) => void) => void required
Anchor to currentEntry currentEntry 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.
Anchor to navigate navigate required: The navigate() method navigates to a specific URL, updating any provided state in the history entries list.
Anchor to removeEventListener removeEventListener (type: "currententrychange", cb: (event: ) => void) => void required
Anchor to updateCurrentEntry updateCurrentEntry (options: ) => 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.
```
NavigationHistoryEntry
```
navigationType
Returns the type of the navigation that resulted in the change.
```
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.
```
() => 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.
```
string
```
url
Returns the URL of this history entry.
```
string | null
```

NavigationTypeString

An enumerated value representing the type of navigation.

'push' | 'replace' | 'traverse'

NavigateFunction

NavigationUpdateCurrentEntryOptions

state
```
unknown
```

Examples

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>

);

}

Examples

Extension.jsx

Default

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>
  );
}

Was this page helpful?