Navigation
The Navigation API allows you navigate within and outside of your app using the HTML anchor element. It also allows you to modify the top-level browser URL with or without navigating. It does this through the History API and the Navigation API.
Anchor
examples
anchor
<a href="shopify://admin/products" target="_top">Products page</a>
Anchor to examplesExamples
Navigating and updating the browser URL
App navigation with relative path
examples
App navigation with relative path
description
Navigating to relative path within your app
HTML
<a href="/settings">Settings</a>JavaScript
open('/settings', '_self');
Anchor to example-external-url-in-same-windowExternal URL in same window
Navigating to external URL in same window
Anchor to example-external-url-in-new-windowExternal URL in new window
Navigating to external URL in new window
External URL in same window
examples
External URL in same window
description
Navigating to external URL in same window
HTML
<a href="https://example.com">Settings</a>JavaScript
open('https://example.com', '_top');External URL in new window
description
Navigating to external URL in new window
HTML
<a href="https://example.com" target="_blank">Settings</a>JavaScript
open('https://example.com', '_blank');
Anchor to example-/products-page/products page
Navigating to /products page
Anchor to example-/products-page-with-resource/products page with resource
Navigating to /products page with specific resource
Anchor to example-/customers-page/customers page
Navigating to /customers page
Anchor to example-/orders-page/orders page
Navigating to /orders page
/products page
examples
/products page
description
Navigating to /products page
HTML
<a href="shopify://admin/products" target="_top">Products page</a>JavaScript
open('shopify://admin/products', '_top');/products page with resource
description
Navigating to /products page with specific resource
HTML
<a href="shopify://admin/products/123" target="_top">Products page</a>JavaScript
open('shopify://admin/products/123', '_top');/customers page
description
Navigating to /customers page
HTML
<a href="shopify://admin/customers" target="_top">Customers page</a>JavaScript
open('shopify://admin/customers', '_top');/orders page
description
Navigating to /orders page
HTML
<a href="shopify://admin/orders" target="_top">Orders page</a>JavaScript
open('shopify://admin/orders', '_top');
Anchor to example-history-apiHistory API
Using the History API
History API
examples
History API
description
Using the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)
pushState
history.pushState(null, '', '/settings');replaceState
history.replaceState(null, '', '/settings');Navigation API
description
Using the [Navigation API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API)
pushState
navigation.navigate('/settings', { history: 'push', });replaceState
navigation.navigate('/settings', { history: 'replace', });