When an active navigation menu item is set via navigationMenu.set({active:...} nothing actually happens, the active item is not applied to the app menu. It feels like the active item is detected by app URL automatically and manual setting of “active” item is ignored.
Happens on the latest @shopify/app-bridge:3.7.10, and on previous versions as well.
Links to existing opened issues in Github and Community:
Hey @Siarhei_Karavai - thanks for sharing that Github link and for flagging this. Are you seeing the same issue as described there where the menu item isn’t showing up at all? Just wanted to confirm - generally, opening up a Github issue is a quick way to get things looked at, but I can dig into this as well after I hear back from you.
Happy to investigate further.
Menu items are showing up, but manual actiavtion does nothing. Bridge detects the active menu item automatically and ignores explicit settings
opening up a Github issue is a quick way to get things looked at
I’d expect this, yes 
But that issue is 2 weeks old with no responses
Hey @Siarhei_Karavai - thanks for clarifying here! Happy to dig into this further and see if we can get it resolved. Would you be able to share a brief screen recording showing this behaviour in action, along with a small code snippet of how you’re implementing the navigationMenu.set({active:...}) call?
I can take a look to see if we can narrow down exactly what’s happening and potentially identify a workaround/look into this further internally for you.
Hi @Alan_G
We have the same issue using JavaScript. We are on “@shopify/app-bridge”: “^3.7.10”
Here’s a sample code:
const actions = AppBridge.actions;
const NavigationMenu = actions.NavigationMenu;
const AppLink = actions.AppLink;
const settingsLink = AppLink.create(app, {
label: 'Settings',
destination: '/settings',
});
const helpLink = AppLink.create(app, {
label: 'Help',
destination: '/help',
});
const navigationMenu = NavigationMenu.create(app, {
items: [settingsLink, helpLink]
});
// This generates the navigationMenu correctly, however, `set` doesn't work
navigationMenu.set({active: helpLink});
We verified that navigationMenu and helpLink are both valid and correct objects.
This also doesn’t work:
const navigationMenu = NavigationMenu.create(app, {
items: [settingsLink, helpLink],
active: helpLink,
});
Hey @Ronald_G , thanks for the flag on this. I’ll look into this on my end for you and follow up once I have more info, appreciate you sending the sample reproduction code there.
Hey @Ronald_G 
, just following up here. I was able to get in touch with our product team, and just wanted to clarify that if you are building a new feature, our reccomendation is to migrate over to our new App Bridge model:
Currently, our older App Bridge models are considered “legacy” and while we do maintain them, we won’t be pushing updates or fixes to them unless necessary. My understanding is that this is a known issue in the older version of App Bridge, but if you do still see the behaviour pop up in the new version of app bridge, please let me know and I’d be happy to take a closer look with you. Hope this helps a little bit at least, please let me know if I can clarify anything as always.
Thanks @Alan_G
Is there a version of AppBridge 4 that’s for JavaScript? We do not use React so we cannot upgrade to 4.x.
No worries @Ronald_G , unfortunately, at the moment we aren’t offering a non-React version of App Bridge 4. The 4.x line is the React package (@shopify/app-bridge-react) and the original package (@shopify/app-bridge) remains on the 3.x track and is in legacy mode, essentially maintenance-only.
If you’re open to it, one option I’ve seen work is a minimal React wrapper just for the app shell so you can use App Bridge React 4.x’s Provider and NavigationMenu, while keeping the rest of your app in plain JS. Totally understand if that’s not feasible right now though.
For new work, our recommendation is to target the new model to make sure everything is up to date. If you do try the React 4.x path and hit any issues, I definitely understand that rebuilding an app isn’t ideal if you’re moving to a new framework, so I’m happy to help take a closer look with you here if needed.
Hi @Alan_G
This sounds like this issue needs to be raised to the Product Management team. Can you do so? I’m not sure if all Shopify partners use React. Essentially Shopify is saying use React or do not use App Bridge. I’d assume many partners, especially large partners with very established tech stacks, cannot migrate to React easily.
Hey @Ronald_G - thanks for the ping. I touched base with our product team for you, and just wanted to clarify that using React isn’t mandatory for App Bridge 4, apologies for the misunderstanding on my end.
To confirm, App Bridge 4 is built specifically to leverage web components so you can effectively bring your own stack if needed, but we did build custom helpers that are Shopify specific for React, as most of our boilerplate app templates are React/Remix-based (and are our preferred libraries/frameworks).
Here’s a quick link to the generic reference docs for reference in case it’s helpful:
We don’t have a fix planned for the NavigationMenu ‘active’ state issue on App Bridge v3. New features and fixes wwill land on App Bridge 4, so our recommendation is to migrate when you can. If you run into anything using AB4 without React, I’m happy to help take a closer look.
Hope this helps, let me know if I can clarify anything more on my end here, more than happy to help if needed!
Hi @Alan_G
Can you elaborate on “React isn’t mandatory for AppBridge 4”? The 4.x library doesn’t seem to have any JavaScript functions to call NavigationMenu, ContextualSaveBar such as Contextual Save Bar. If there is, can you point me to it?
However, Shopify BFS audit is requiring that NavigationMenu setting to work. So we are in a bind.
Hey Ronald, no worries and I definitely get where you’re coming from, especially considering BFS. App Bridge 4 itself, is essentially designed around web components and the CDN-hosted script, which means you can absolutely use it without React (although our boilerplates and tutorials are mainly React-focused). Just sharing a few quick steps in case they’re helpful.
First, include the App Bridge script in your HTML:
Then for For NavigationMenu, you should be able to use the ui-nav-menu web component:
<ui-nav-menu> <a href="/" rel="home">Home</a> <a href="/settings">Settings</a> <a href="/help">Help</a> </ui-nav-menu>
For ContextualSaveBar, the easiest method would be using the ui-save-bar web component.
<ui-save-bar id="my-save-bar"></ui-save-bar> <script> // Show/hide using the global shopify object shopify.saveBar.show('my-save-bar'); shopify.saveBar.hide('my-save-bar'); </script>
The APIs are all available through the global shopify object and should work once the CDN connection loads.
We don’t yet have a comprehensive non-React migration guide at the moment, but we did discuss looking into offering one since I do understand the method is very different from the older versions of App Bridge. I can’t guarantee anything on that front, but in the meantime, you can find all available APIs for V4 at: https://shopify.dev/docs/api/app-bridge-library
Let me know if you need any specific examples or run into issues with the migration. Happy to assist with this for sure.
Thank you @Alan_G
Would Shopify consider making the “active NavigationMenu UX” not a requirement for BFS?
Currently, if a user navigates to a page, Shopify is requiring that the NavigationMenu be set to Active. However, since it doesn’t work on AppBridge 3.x, we are failing that requirement.
If Shopify cannot do so, we’ll have no choice but to remove all NavigationMenus, which is a bad experience for users but satisfies Shopify’s requirement.
Hey @Ronald_G , no problem!
The App Bridge v4 Web Components approach for navigation menus should support active state handling - is there something preventing you from implementing it that way? Just want to understand any blockers here. App Bridge 4 (both the Web Components and React versions) automatically matches and highlights the active link based on the current URL. You don’t need to manually set any active state, just based on my understanding.
From the migration guide:
“The navigation menu component no longer accepts the
navigationLinksandmatcherprops. Instead, to provide menu links, addaelements as children of theNavMenucomponent. The active link is automatically matched.”
So, using Web Components only, it should just be something like this:
<ui-nav-menu>
<a href="/" rel="home">Home</a>
<a href="/templates">Templates</a>
<a href="/settings">Settings</a>
</ui-nav-menu>
App Bridge should automatically detect which page you’re on and apply the active styling to the matching link. No rel="selected" or manual state management needed!
Just wanted to understand the blocker you’re seeing better so that I can advocate on my end here internally if needed. Happy to speak with some folks on our end here to see if we can clarify requirements/so that I can look into seeing if we can waive any of those requirements on our end. I can’t guarantee anything, but I am happy to dig further into this for sure.
Hi @Alan_G
This doesn’t work if the pages are loaded with UJS (Unobtrusive JavaScript). We need to actively call a JavaScript method or actively set an element after UJS loads.
Thanks for clarifying @Ronald_G , I see what you mean. I’ll look into this further on my end to see if we have any workaround or if we can look into your request RE: the BFS requirements.
I’ll loop back with you here once I have more info to share.
Hey @Ronald_G 
thanks for your patience while I dug into this with the team.
I can’t speak to BFS policy decisions at the moment, but on the technical side: our ultimate recommendation is to migrate to App Bridge 4 (CDN-based). Just to reiterate, this doesn’t require React at all, it’s built on web components and should work with any stack. We’re not planning fixes for the v3 NavigationMenu active state issue, all new features and fixes are landing in App Bridge 4.
To help me better understand your setup and see if there’s a workaround - can you give me a bit more detail on how UJS is blocking the migration? I want to make sure I fully understand the blocker. Specifically, what happens after UJS loads that requires you to manually set the active nav state? This would help me either find a solution or advocate better internally if there’s a gap and try to replicate things on my end here.
I’d recommend giving the migration a shot in the meantime if you haven’t, and if you hit specific blockers, I’m more than happy to troubleshoot with you here (and if you can share examples, I’d be happy to investigate these). If you’d like me to check on BFS policies, I’m happy to do so and can see if we have any other avenues to get that info confirmed on my end. Thanks again for waiting on me here, let me know if I can help out any further.
We are having the same issue. Frankly, its kind of ridiculous that shopify is not letting you programmatically set the “active” navigation state. It also doesnt mention in the docs how the active state is being set internally. And on top of that, its a BFS requirement. Please address the following:
active state is being set. “Just using the URL” is not clear enough. What is the specific code logic?active state in app bridge 4 navigation menuThank you.