Skip to main content

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.

Was this section helpful?

Anchor

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

Anchor to examplesExamples

Navigating and updating the browser URL

Anchor to example-navigating-to-routes-within-your-appNavigating to routes within your app

Anchor to example-app-navigation-with-relative-pathApp navigation with relative path

Navigating to relative path within your app

Was this section helpful?

App navigation with relative path

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

Anchor to example-navigating-to-external-urlsNavigating to external URL's

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

Was this section helpful?

External URL in same window

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

Anchor to example-navigating-to-pages-in-the-shopify-adminNavigating to pages in the Shopify admin

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

Was this section helpful?

/products page

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

Anchor to example-updating-the-browser-url-without-navigatingUpdating the browser URL without navigating

Anchor to example-history-apiHistory API

Using the History API

Anchor to example-navigation-apiNavigation API

Using the Navigation API

Was this section helpful?

History API

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