The menu item is NOT active as soon as it is clicked. (Shopify App bridge - NavigationMenu)

Question

The menu item is not active when we click it, but the corresponding page is displayed. Im using the default NavigationMenu by the Shopify's node app template,

<NavigationMenu
                navigationLinks={[
                  {
                    label: "Home",
                    destination: "/",
                  },
                  {
                    label: "Help",
                    destination: "/help",
                  }
                ]}
              />

Even if i click the help menu, it shows Home menu as Active

Answer 1

If you go to the component docs here https://shopify.dev/docs/apps/tools/app-bridge/actions/menu/navigation

You will notice that there is an attribute matcher={(link, location) => link.destination === location.pathname}, it seems that you need to use that for the active check flag.

The docs explicitly note that:

App Bridge does not automatically set the active state.

So your component should look like the code below.

<NavigationMenu
  navigationLinks={[
    {
      label: "Home",
      destination: "/",
    },
    {
      label: "Help",
      destination: "/help",
    }
  ]}
  matcher={(link, location) => link.destination === location.pathname}
/>