Channel Menu

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.

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:

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

const app = createApp({
  apiKey: '12345',
});

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

Set an active nav item

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

channelMenu.set({active: settingsLink});

Reset active nav item

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

channelMenu.set({active: undefined});