Navigation Menu

The NavigationMenu action allows you to create a navigation menu for your app. On desktop web browsers, the navigation menu is displayed under your app’s title, at the top of the screen. On Shopify mobile, the navigation menu is displayed in a dropdown from the titlebar.

Setup

Create an app and import the NavigationMenu 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 {NavigationMenu, AppLink} from '@shopify/app-bridge/actions';

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

Create any number of AppLink instances and then pass them into NavigationMenu. Each AppLink instance represents a link on the menu.

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

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

// create NavigationMenu with no active links

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

// or create a NavigationMenu with the settings link active

const navigationMenu = NavigationMenu.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.

navigationMenu.set({active: settingsLink});

Reset active nav item

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

navigationMenu.set({active: undefined});