Skip to main content

Navigation Menu

Note

This is a legacy API. Use the latest version of the App Bridge Navigation Menu instead.

The NavigationMenu component creates a navigation menu for your app. On desktop web browsers, the navigation menu appears as part of the app nav, on the left of the screen. On Shopify mobile, the navigation menu appears in a dropdown from the TitleBar.

A close-up image of the Shopify admin sidebar navigation menu. This image shows the Apps menu and the following child menu items: App name (selected), Page 1, Page 2, and Page 3.

There are 2 ways to use the navigation menu action set:

  1. Plain JavaScript
  2. React component

Anchor to Plain JavaScriptPlain JavaScript

Anchor to Example codeExample code

Import the createApp function from @shopify/app-bridge and the NavigationMenu and AppLink actions from @shopify/app-bridge/actions. Then use the createApp function to create an 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 {AppLink, NavigationMenu} from '@shopify/app-bridge/actions';

const app = createApp(config);

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

The first seven links are rendered by default. Anything above seven links is hidden under a View More section.

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.

navigationMenu.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.

navigationMenu.set({active: undefined});

Anchor to ReactReact

Anchor to Example CodeExample Code

Note

In the following example, config is a valid App Bridge configuration object. Learn more about configuring App Bridge.

import {Provider, NavigationMenu} from '@shopify/app-bridge-react';

function MyApp {
return (
<Provider config={config}>
<NavigationMenu
navigationLinks={[
{
label: 'Home',
destination: '/',
},
{
label: 'About',
destination: '/about',
},
]}
matcher={(link, location) => link.destination === location.pathname}
/>
</Provider>
);
}
Note

When using the App Bridge React library, you need to wrap all of your App Bridge React code inside of a single App Bridge Provider.

Anchor to PropsProps

NameTypeDescriptionRequired
navigationLinksNavigationLink arrayA list of all the links to appear in the navigation menuYes
matcher(link: NavigationLink, location: Location) => booleanA function to provide custom logic for setting the active link. This function gets called with each link and the current location. If it returns true, the current link will become the active link.No

Anchor to NavigationLinkNavigationLink

NameTypeDescriptionRequired
labelstringThe text displayed in the navigation menu linkYes
destinationstringThe path to navigate to when a user link follows a linkYes
Was this page helpful?