Navigation Menu
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.
There are 2 ways to use the navigation menu action set:
Plain JavaScript
Anchor link to section titled "Plain JavaScript"Example code
Anchor link to section titled "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.
Create any number of AppLink instances and then pass them into NavigationMenu. Each AppLink instance represents a link on the menu.
Set an active nav item
Anchor link to section titled "Set an active nav item"To update the active state for the menu, pass a link to the active option using the set method.
Reset active nav item
Anchor link to section titled "Reset active nav item"To clear the active link, pass undefined as the active option using the set method.
Example Code
Anchor link to section titled "Example Code"
| Name | Type | Description | Required |
|---|---|---|---|
| navigationLinks | 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
Anchor link to section titled "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 |