Shopify App Bridge NavigationMenu highlights wrong menu item for nested routes (/list/123 selects "All Bundles" instead of "Product List")

Shopify Apps
1

Hi everyone,

I’m building a Shopify embedded app using React + Node.js and using the App Bridge NavigationMenu.

My navigation links are configured like this:

const navigationLinks = [
  { label: "Subscriptions", destination: "/subscriptions" },
  { label: "All Bundles", destination: "/" },
  { label: "Product List", destination: "/list" },
  { label: "Gift Products", destination: "/gift-products" },
  { label: "Analytics", destination: "/analytics" },
  { label: "Unsplit Orders", destination: "/orders" },
  { label: "Settings", destination: "/settings" },
  { label: "Instructions", destination: "/instructions" },
];

The issue is that when I navigate to a nested route such as:

/list/123

the Shopify admin sidebar highlights “All Bundles” (/) instead of “Product List” (/list).

Expected behavior:

  • /list → Product List selected
  • /list/123 → Product List selected

Actual behavior:

  • /list/123 → All Bundles selected

Has anyone experienced this issue with NavigationMenu route matching? Is there a recommended way to make parent navigation items stay active for nested routes?

Any guidance would be appreciated.

Thanks!

2

The smoking gun is destination: "/" on All Bundles. NavigationMenu picks the active item by matching the current path against your destinations, and “/” is a prefix of literally every route, so a nested path like /list/123 that has no exact menu entry tends to fall back to the home “/” match instead of /list.

Quickest fix is to stop using “/” as a real nav destination: give All Bundles its own path like /bundles and redirect “/” to it. Then /list/123 only collides with /list and highlights correctly.

If you need the native menu highlighted on detail routes specifically, that part is genuinely limited since Shopify renders the menu outside your iframe, so route structure is the lever you actually control. Which App Bridge are you on, the v4 CDN nav or the older React NavigationMenu? The matching behaves a bit differently between them.

3

Change “All Bundles” destination from “/” to something like “/bundles” and redirect “/” to it. This avoids “/” matching every route and fixes the highlight on nested paths like /list/123.