UI Nav Menu for App Bridge - Dynamically set the active link?

UI Nav Menu for App Bridge - Dynamically set the active link?

jback
Shopify Partner
5 0 5

We're in the process of implementing UI-Nav-Menu and wondering if there's any way to set the active link? Something like the following:

 

<ui-nav-menu>
<a href="/" rel="home">Home</a>
<a href="/templates" active="true">Templates</a>
<a href="/settings">Settings</a>
</ui-nav-menu>

 

The core issue is that users navigate to pages within our app without interacting with the Ui Nav Menu, and this leads to an inconsistency between the active link shown in the UI Nav Menu and the page currently displayed to the user. 

 

Any advice or insights would be greatly appreciated!

 

Replies 3 (3)

SBD_
Shopify Staff
1829 271 415

Hey @jback 

 

Checking on this one and will report back!

Scott | Developer Advocate @ Shopify 

GetAllTool
Shopify Partner
27 0 3

dhaldankar
Shopify Partner
1 0 0

You can add route parameter to the URL, it highlights the menu which matches with the route.

For example, if url is -
<YOUR SHOPIFY APP URL>/templates

then, the templates menu will be highlighted.