App nav

The app nav component creates a navigation menu for your app. On desktop, the navigation appears in the app nav on the left side of the screen. On Shopify mobile, it appears in a dropdown from the title bar.

Add links to define navigation items. You can designate a home route with rel="home" to set the default landing page. To trigger navigation from JavaScript code, use the Navigation API.

Anchor to PropertiesProperties

Properties for the app nav element. This element configures the app nav in the Shopify admin.

Anchor to children children any: The navigation items to display, provided as link child elements. Each link creates a navigation item in the app's navigation menu. Include one link with rel="home" to set the default landing page. Commonly used to organize your app into logical sections (like "Products", "Orders", or "Settings").

Anchor to Link propertiesLink properties

Properties for links used as children.

Anchor to href href string required: The URL path for the navigation item. Must be a relative path within your app, such as /products or /settings. When clicked, it navigates the app to this route without a full page reload. The path should match a route defined in your app's routing configuration.
Anchor to children children string: The visible label text for the navigation item. Keep labels short (1-2 words) and use nouns that describe the destination (such as "Products", "Settings", or "Reports"). Avoid verbs like "Manage" or "View" to maintain consistency with Shopify admin navigation patterns.
Anchor to rel rel 'home': Set to "home" to designate this link as the app's default landing page. When set, the link is hidden from the navigation menu. Only one link should have rel="home".

Anchor to ExamplesExamples

Anchor to Navigation menuNavigation menu

Add consistent navigation to your app. This example creates a navigation menu with links and a designated home route using rel="home".

html

<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>

Anchor to Best practicesBest practices

Keep navigation concise: Too many items makes navigation harder to scan. Group related pages or use subpages if you have many sections.
Use clear, concise labels: Navigation labels should be 1-2 words using nouns, such as "Settings", "Templates", or "Reports".
Order by importance: Place the most frequently used sections first in the navigation.
Match labels to page titles: Keep navigation labels consistent with the destination page titles.

Anchor to LimitationsLimitations

You can't nest navigation items inside other navigation items. Structure your app with a single level of navigation.

Was this page helpful?