Navigation Menu active item not working when URL has query parameters

App Bridge
1

Hi, I’m encountering an issue with the Navigation Menu component in my Shopify App.

The problem is that the active item is not being correctly highlighted when the current URL contains query parameters.

Here’s a simplified version of my code:

const navigationLinksData = [
  { label: 'Dashboard', destination: '/' },
  { label: 'Items', destination: '/items' },
  { label: 'Contact', destination: '/contact' }
];

const navigationLinks = navigationLinksData.map(link =>
  AppLink.create(app, link)
);

const currentPath = window.location.pathname;

const activeLink = navigationLinks.find(link =>
  link.options.destination === currentPath
);

const navigationMenu = NavigationMenu.create(app, {
  items: navigationLinks,
  active: activeLink,
});

This used to work fine — for example, navigating to /items?id=123 would still mark the “Items” link as active. But now, it doesn’t — instead, the “Dashboard” item is incorrectly marked as active.

It seems that when there’s a query string in the URL, the active item no longer matches correctly, even though the pathname is still /items.

Any ideas on how to fix this or whether this behavior has changed recently?

Thanks in advance! :folded_hands: