Skip to main content

Navigation
API

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 navigate
navigate
required

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

Was this section helpful?

Anchor to full-page navigationFull-Page Navigation

Only available for full-page extension customer-account.page.render

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: { state: Record<string, any>; }) => 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.

Was this section helpful?

Anchor to useNavigationCurrentEntry
useNavigationCurrentEntry()

Returns the live navigation current entry

Anchor to useNavigationCurrentEntry-returnsReturns

NavigationHistoryEntry

getState
() => Record<string, any>

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

key
string

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.

url
string

Returns the URL of this history entry.

Was this section helpful?

Navigation example

import {
reactExtension,
useApi,
Button,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
'customer-account.page.render',
() => <App />,
);

function App() {
const {navigation} = useApi();

return (
<Button
onPress={() => {
navigation.navigate('extension://orders');
}}
>
Navigate to orders path
</Button>
);
}

Anchor to examplesExamples

Navigation api examples

Anchor to example-listening-for-navigation-current-entry-eventsListening for navigation current entry events
Anchor to example-using-the-live-current-entry-value-in-a-full-page-extensionUsing the live current entry value in a full-page extension
Anchor to example-navigating-to-customer-account-native-order-index-pageNavigating to customer account native order index page
Was this section helpful?

Listening for navigation current entry events

React

import React, {
useEffect,
useState,
useCallback,
} from 'react';
import {
reactExtension,
useApi,
BlockStack,
Heading,
Image,
ResourceItem,
Text,
} from '@shopify/ui-extensions-react/customer-account';
import type {NavigationCurrentEntryChangeEvent} from '@shopify/ui-extensions/customer-account';

export default reactExtension(
'customer-account.page.render',
() => <App />,
);

function App() {
const {navigation} = useApi();

const [currentEntryState, setCurrentEntry] =
useState<NavigationCurrentEntryChangeEvent>();

const updateCurrentEntryState = useCallback(
(
event: NavigationCurrentEntryChangeEvent,
) => {
setCurrentEntry(event);
},
[],
);
useEffect(() => {

Anchor to relatedRelated

APIsStandardApi