Shopify app-bridge v4 and cdn version 3 naigation meny issue

App Bridge
,
1

Hi, I am using both the latest version of the shopify app-bridge because I want to use the contextual save bar, also I am using older cdn version

I am not using React but custom HTML I am making menu using the app-bridge 3 way
const DashboardLink = AppLink.create(ShopifyApp, {
label: ‘Dashboard’,
destination: ‘/proxy/dashboard’,
});

const seoAuditLink = AppLink.create(ShopifyApp, {
    label: 'Product SEO optimization',
    destination: '/proxy/seo-audit',
});

The menus are created, and it work,s but when I click on other links the other links gets highlighted for a second and the home page gets highlighted
navigationMenu.set({ active: richSnippetLink });
This is not working when I console the navigationMenu I can see the active item is correct but it does not show on the app menu

Home Pricing Settings This creates the menu but still does not highlight the current page
1 Like
3

Hey @Apoorv_kanungo! :waving_hand:

The simplest solution here would be to switch to using the current version of App Bridge for your navigation items since you mentioned you’re already using the latest version for the contextual save bar.

If that’s not possible, you would need to write some custom code to ensure your app’s route and the parent route (the one shown in the URL bar) are in sync. Docs here

4

Hi @Apoorv_kanungo

Just wanted to check if the approach advised above works for you?

5

Actually its working with Older version as well with this

navigationMenu.set({active: settingsLink});

but since the URL changes it is not able to recognise the current link is there any way we can set active not based on variable but based on the current URL
Like

navigationMenu.set({active: '/dashboard/pricing'});