---
title: App nav
description: >-
  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.
api_name: app-home
source_url:
  html: 'https://shopify.dev/docs/api/app-home/app-bridge-web-components/app-nav'
  md: 'https://shopify.dev/docs/api/app-home/app-bridge-web-components/app-nav.md'
---

# 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](https://shopify.dev/docs/api/app-home/apis/navigation).

#### Use cases

* **App navigation:** Create a persistent navigation menu with links to different sections of your app.
* **Home route:** Designate a default landing page with `rel="home"` so merchants always have a clear starting point.
* **Desktop sidebar:** Display navigation in the left sidebar on desktop for easy access to app sections.
* **Mobile dropdown:** Provide navigation through a dropdown from the title bar on Shopify mobile.

***

## Properties

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

* **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").

***

## Link properties

Properties for links used as children.

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

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

* **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"`.

***

## Examples

### Navigation menu

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

## Navigation menu

![Add consistent navigation to your app. This example creates a navigation menu with links and a designated home route using \`rel='home'\`.](https://shopify.dev/assets/assets/images/apps/tools/app-bridge-navigation-menu-DdMXEPrX.png)

## html

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

***

## Best 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.

***

## Limitations

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

***