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 |