---
title: Channel Menu
description: >-
  Learn how to modify the sidebar menu for your embedded sales channel app using
  App Bridge.
api_name: app-bridge
source_url:
  html: >-
    https://shopify.dev/docs/api/app-bridge/previous-versions/actions/menu/channel
  md: >-
    https://shopify.dev/docs/api/app-bridge/previous-versions/actions/menu/channel.md
---

ExpandOn this page

* [Setup](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/menu/channel.md#setup)
* [Set an active nav item](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/menu/channel.md#set-an-active-nav-item)
* [Reset active nav item](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/menu/channel.md#reset-active-nav-item)

# Channel Menu

Note

`ChannelMenu` is only available to apps which are [sales channels](https://shopify.dev/docs/apps/build/sales-channels).

The `ChannelMenu` action allows you to create a navigation menu in the sidebar of Shopify admin on desktop. On Shopify mobile, the menu is rendered in a dropdown, like [NavigationMenu](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/menu/navigation).

![A close-up image of the Shopify admin sidebar navigation menu. This image shows the Sales Channels menu and the following child menu items: App name (selected), Page 1, Page 2, and Page 3.](https://shopify.dev/assets/assets/images/apps/tools/app-bridge-channel-menu-DwiLMd1X.png)

***

## Setup

Create an app and import the `ChannelMenu` module from `@shopify/app-bridge/actions`. The examples in this guide refer to the `@shopify/app-bridge` sample app:

Note

In the following example, `config` is a valid App Bridge configuration object. Learn more about [configuring App Bridge](https://shopify.dev/docs/api/app-bridge/previous-versions/app-bridge-from-npm/app-setup#initialize-shopify-app-bridge-in-your-app).

```js
import createApp from '@shopify/app-bridge';
import {ChannelMenu, AppLink} from '@shopify/app-bridge/actions';


const app = createApp(config);
```

Create any number of `AppLink` instances and then pass them into `ChannelMenu`.

```js
const itemsLink = AppLink.create(app, {
label: 'Items',
destination: '/items',
});


const settingsLink = AppLink.create(app, {
label: 'Settings',
destination: '/settings',
});


// create ChannelMenu with no active links


const channelMenu = ChannelMenu.create(app, {
items: [itemsLink, settingsLink],
});


// or create a ChannelMenu with the settings link active


const channelMenu = ChannelMenu.create(app, {
items: [itemsLink, settingsLink],
active: settingsLink,
});
```

***

## Set an active nav item

To update the active state for the menu, pass a link to the `active` option using the `set` method.

Note

App Bridge does not automatically set the active state.

```js
channelMenu.set({active: settingsLink});
```

***

## Reset active nav item

To clear the active link pass `undefined` as the `active` option using the `set` method:

```js
channelMenu.set({active: undefined});
```

***

* [Setup](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/menu/channel.md#setup)
* [Set an active nav item](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/menu/channel.md#set-an-active-nav-item)
* [Reset active nav item](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/menu/channel.md#reset-active-nav-item)