App Nav
The s-app-nav component creates a navigation menu for your app. On desktop web browsers, the navigation menu appears as part of the app nav, on the left of the screen. On Shopify mobile, the navigation menu appears in a dropdown from the TitleBar. This is modeled after the HTML nav element. Note that nested navigation items are not supported.
The s-app-nav element is available for use in your app. It configures the app nav in the Shopify admin.
You may configure the home route of the app by adding the rel="home" attribute to a child element. If it is provided, it will not be rendered as a link in the app nav. It needs to have rel="home" set along with the href set to the root path.
- any
Was this section helpful?
Navigation Menu
<s-app-nav>
<s-link href="/" rel="home">Home</s-link>
<s-link href="/templates">Templates</s-link>
<s-link href="/settings">Settings</s-link>
</s-app-nav>
Examples
Navigation Menu
Default
<s-app-nav> <s-link href="/" rel="home">Home</s-link> <s-link href="/templates">Templates</s-link> <s-link href="/settings">Settings</s-link> </s-app-nav>
Preview
