Navigation

The Navigation API allows you navigate within and outside of your app using the [HTML anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). It also allows you to modify the top-level browser URL with or without navigating. It does this through the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) and the [Navigation API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API).

anchor

<a href="shopify://admin/products" target="_top">Products page</a>

Examples

The Navigation API allows you navigate within and outside of your app using the [HTML anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). It also allows you to modify the top-level browser URL with or without navigating. It does this through the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) and the [Navigation API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API).

Navigating to routes within your app

App navigation with relative path

<a href="/settings">Settings</a>

open('/settings', '_self');

Navigating to external URL's

External URL in same window

<a href="https://example.com">Settings</a>

open('https://example.com', '_top');

External URL in new window

<a href="https://example.com" target="_blank">Settings</a>

open('https://example.com', '_blank');

Navigating to pages in the Shopify admin

/products page

<a href="shopify://admin/products" target="_top">Products page</a>

open('shopify://admin/products', '_top');

/products page with resource

<a href="shopify://admin/products/123" target="_top">Products page</a>

open('shopify://admin/products/123', '_top');

/customers page

<a href="shopify://admin/customers" target="_top">Customers page</a>

open('shopify://admin/customers', '_top');

/orders page

<a href="shopify://admin/orders" target="_top">Orders page</a>

open('shopify://admin/orders', '_top');

Updating the browser URL without navigating

History API

history.pushState(null, '', '/settings');

history.replaceState(null, '', '/settings');

Navigation API

navigation.navigate('/settings', {
  history: 'push',
});

navigation.navigate('/settings', {
  history: 'replace',
});