Shopify Navigation Menu cannot set active menu

Shopify Discussion
1 
# 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!

2

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!

3

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});
  }
});
4

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!

5

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

6

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"
7

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

8

Did you find a solution by any chance?

9

NavigationMenu.create does not work as well.

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

10

I am facing a similar issue. We should create a topic here: https://community.shopify.dev/c/app-bridge/19. This forum is for developers, while this one is more aimed at shop owners.

11

I already made a workaround to fix this issue on our Rails app.
Incase you do the same way I did - just make the Main navigation as single destination (path)
For example:
const sampleLink = AppLink.create(app, { label: “Sample”, destination: ‘/sample’ });

Then, make your submenu/paths like /sample/submenu …
I noticed that the NavigationMenu checks the first path - so this kind of setting never works in my case:
e.g. Main Nav => /sample/one → going to submenu /sample/submenu
but works with
Main Nav => /sample → going to submenu /sample/submenu

Anyways, using active: didn’t work - as long as the first path don’t change, NavigationMenu default behavior set the correct nav.
I hope the above make sense :slightly_smiling_face:

12

Huh, nice :slightly_smiling_face: Glad it worked for you. And shame to Shopify.

In my case all app links start with “app”, so the change would be pretty significant if we go this route.

Anyway, thanks for the idea.