Shopify Navigation Menu cannot set active menu

[aldrien]

# This is from the documentation
# https://shopify.dev/docs/api/app-bridge/previous-versions/actions/menu/navigation

const itemsLink = AppLink.create(app, {
  label: 'Items',
  destination: '/items',
});

const settingsLink = AppLink.create(app, {
  label: 'Settings',
  destination: '/settings',
});

// create a NavigationMenu with the settings link active

const navigationMenu = NavigationMenu.create(app, {
  items: [itemsLink, settingsLink],
  active: settingsLink,
});

Previously we don't have issue setting specific nav/menu for our sub pages. The default behavior works when current page is the same or came from the actual nav. However, when we have sub page which is a child of specific nav it's no longer set to active like before.

What I mean above is I did like:

window.navigationMenu = NavigationMenu.create(app, {
  items: navItems # array of menu items created using AppLink.create({})
});


# navItem => specific menu item to be activated
window.navigationMenu.set({active: navItem});

That works before, but suddenly not. Unsure if there's some update made with AppBridge etc....

Any help will be much appreciated. Thank you!

[rajweb]

Hey @aldrien ,

It seems recent App Bridge changes may have broken .set({ active }). The recommended fix is to re-create the NavigationMenu with the active item each time the route changes: 

window.navigationMenu = NavigationMenu.create(app, {
  items: navItems,
  active: navItem, // the matched AppLink item
});

Also, make sure each destination path exactly matches window.location.pathname. Please feel free to reach out to me if you need further help. Thanks!

Best Regards,

Rajat

Shopify Expert!

[aldrien]

Hi @rajweb - thanks for your reply. Yes seems the recent changes to AppBridge breaks something.
Btw, when you say 
"make sure each destination path exactly matches window.location.pathname"

What I really do/need is similar to this logic (which works before):

const optimizeImagesLink = AppLink.create(app, {label: "Optimize Images", destination: '/images' });
const plansLink = AppLink.create(app, { label: "Plan", destination: '/plans' });

const navItems = [
  optimizeImagesLink,
  plansLink
];

window.navigationMenu = NavigationMenu.create(app, {
    items: navItems
});

// THIS SET THE "Optimize Images" navigation link as active
// For example, path is "/images/edit" or "/images/settings"
document.addEventListener("navigation:update", (event) => {
  const active_menu = event.detail.active_menu;

  if (active_menu.includes("/images")) {
    window.navigationMenu.set({active: optimizeImagesLink});
  }
});

[rajweb]

Thanks for clarifying  and yes, your approach makes perfect sense.

This logic should work, and it did work before, but recent App Bridge updates (especially in v3+) seem to have broken the .set({ active }) method, or made it unreliable when called after initialization.

Recommended Fix (Reliable Approach Now)

Instead of using .set({ active }) after initialization, re-create the NavigationMenu with the active item already set:

const optimizeImagesLink = AppLink.create(app, { label: "Optimize Images", destination: '/images' });
const plansLink = AppLink.create(app, { label: "Plan", destination: '/plans' });

const navItems = [optimizeImagesLink, plansLink];

// Determine active item manually
let activeItem = null;
if (window.location.pathname.startsWith('/images')) {
  activeItem = optimizeImagesLink;
} else if (window.location.pathname.startsWith('/plans')) {
  activeItem = plansLink;
}

window.navigationMenu = NavigationMenu.create(app, {
  items: navItems,
  active: activeItem,
});

This ensures the correct menu item is active, even on subpages like /images/edit.

Please feel free to reach out to me if you need help adapting this to dynamic routing or more complex nav structures.

Thanks!

[aldrien]

I will try your suggested approach and let you know after. Thank you 🙂 

[aldrien]

Hello again @rajweb - i tried, but still not working.
I forgot to re-mention (as i tried again) the basic nav logic from documentation.
It still not setting the `Settings` nav unless you click it and visit the actual page which is the default behavior.

    const itemsLink = AppLink.create(app, {
      label: 'Images',
      destination: '/images/alt_text/edit',
    });
    
    const settingsLink = AppLink.create(app, {
      label: 'Settings',
      destination: '/settings/general',
    });
    
    const navigationMenu = NavigationMenu.create(app, {
      items: [itemsLink, settingsLink],
      active: settingsLink,
    });

Here are the versions i currently used:

pin "@shopify/app-bridge", to: "https://ga.jspm.io/npm:@shopify/app-bridge@3.7.10/index.js"

pin "@shopify/app-bridge/utilities", to: "https://ga.jspm.io/npm:@shopify/app-bridge@3.7.10/utilities/index.js"

[SiarheiKaravai]

Did you find a solution by any chance?

[SiarheiKaravai]

NavigationMenu.create does not work as well.

It looks like app-bridge detects the active link by itself using "destination"

[SiarheiKaravai]

Same here, the navigaton menu is not working properly when the active menu item should be set because one of its nested elements is active. 

The active element for the NavigatonMenu is set properly through the code, but it is ignored by Shopify and the app-bridge renders some other menu item as active.

It is broken for both set(active) and for re-creation of NavigationMenu