Skip to main content

App nav

The app nav component configures navigation items that appear in your app's sidebar within the Shopify admin. Supply child s-link entries to define your app's sub-navigation. The app name in the sidebar already acts as the home link, so there's no need to add a root (/) entry.

Unlike the App Bridge App nav, rel="home" on s-link isn't supported. To trigger navigation from JavaScript, use the Navigation API.


Configure the following properties on the app nav component.

Anchor to children
children

The navigation items to inject into the Shopify admin sidebar. Provide <s-link> children where each link represents a navigation item. This component does not render any visible UI itself.

string

A unique identifier for the element.


Anchor to Add navigation to the admin shellAdd navigation to the admin shell

Register sub-navigation links for your app in the Shopify admin sidebar. This example uses an s-app-nav root with s-link children. The app name already acts as the home link, so there's no need to add a root (/) entry.

Add navigation to the admin shell

Shopify admin sidebar showing app navigation links configured with the app nav component.

html

<s-app-nav>
<s-link href="/templates">Templates</s-link>
<s-link href="/settings">Settings</s-link>
</s-app-nav>

Was this page helpful?