> Note:
> This is a legacy API. Use the latest version of the App Bridge [Navigation Menu](/docs/api/app-bridge-library/web-components/ui-nav-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`.

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

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

1. [Plain JavaScript](#plain-javascript)
2. [React component](#react)

## Plain JavaScript

### Example 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](/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 {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.

```js
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.

### 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
navigationMenu.set({active: settingsLink});
```

### Reset active nav item

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

```js
navigationMenu.set({active: undefined});
```

## React

### Example Code

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


```jsx
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`](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/using-react#provider).


### Props

|Name|Type|Description|Required|
|---|---|---|---|
|navigationLinks|[`NavigationLink`](#navigationlink) array|A list of all the links to appear in the navigation menu |Yes|
|matcher|`(link: NavigationLink, location: Location) => boolean`|A 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|

#### NavigationLink

|Name|Type|Description|Required|
|---|---|---|---|
|label|`string`|The text displayed in the navigation menu link |Yes|
|destination|`string`|The path to navigate to when a user link follows a link|Yes|