Navigation

Examples

• anchor

  Default

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

• App navigation with relative path

  Description

  Navigating to relative path within your app

  HTML

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

  JavaScript

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

• 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');
  

• /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');
  

• 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',
  });