---
title: App nav
description: >-
  The app nav component configures navigation items for your app in the Shopify
  admin shell. Use it to declare the top-level navigation structure merchants
  see alongside your App Home UI extension.
api_version: 2026-07-rc
source_url:
  html: >-
    https://shopify.dev/docs/api/app-home-ui-extension/latest/web-components/navigation/app-nav
  md: >-
    https://shopify.dev/docs/api/app-home-ui-extension/latest/web-components/navigation/app-nav.md
---

# 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](https://shopify.dev/docs/api/app-home/app-bridge-web-components/app-nav), `rel="home"` on `s-link` isn't supported. To trigger navigation from JavaScript, use the [Navigation API](https://shopify.dev/docs/api/app-home-ui-extension/latest/target-apis/utility-apis/navigation-api).

#### Use cases

* **Primary app navigation**: Define the entries merchants use to move between sections of your app.
* **Sub-navigation hierarchy**: Group related pages under your app entry in the Shopify admin sidebar.

***

## Properties

Configure the following properties on the app nav component.

* **children**

  **ComponentChildren**

  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.

* **id**

  **string**

  A unique identifier for the element.

### ComponentChildren

Represents any valid children that can be rendered within a component, including elements, strings, numbers, or arrays of these types. This is an alias for Preact's \`ComponentChildren\` type.

```ts
preact.ComponentChildren
```

***

## Examples

### Add 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.](https://shopify.dev/assets/assets/images/apps/tools/app-bridge-navigation-menu-DdMXEPrX.png)

## html

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

***