> Note:
> `ChannelMenu` is only available to apps which are [sales channels](/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](/docs/api/app-bridge/previous-versions/actions/menu/navigation).

<img alt="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." src="/assets/apps/tools/app-bridge-channel-menu.png" style="display: block; width: 100%; max-width: 524px">

## 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](/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});
```