Skip to main content

Channel Menu

Note

ChannelMenu is only available to apps which are 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.

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.

Anchor to SetupSetup

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.

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.

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,
});

Anchor to Set an active nav itemSet 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.

channelMenu.set({active: settingsLink});

Anchor to Reset active nav itemReset active nav item

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

channelMenu.set({active: undefined});
Was this page helpful?