CDN App Bridge not showing NavMenu in Sales Channel

App Bridge
1

As the title says really… I cannot get the nav menu work since upgrading from the old app bridge (where I would call NavigationMenu.Create()) to the cdn version where I am expected to use web components.

In our sales channels I try and use this:

<ui-nav-menu>
  <a href="/" rel="home">Home</a>
  <a href="/templates">Templates</a>
  <a href="/settings">Settings</a>
</ui-nav-menu>

and nothing will be shown under our channel in the admin panel; I know that app bridge is working as I can use the modal example from the docs, but the menu ones simply do not work.

This is blocking our upgrade to the latest app bridge as without navigation nobody will be able to use our application.

Ideas would be very welcome.

2

Hi @AshCloudshelf

Can you try using the s-app-nav element instead of ui-nav-menu? EG:

<s-app-nav>
  <s-link href="/" rel="home">Home</s-link>
  <s-link href="/templates">Templates</s-link>
  <s-link href="/settings">Settings</s-link>
</s-app-nav>

Also - are you seeing any errors in console?

3

HI @Liam-Shopify

I have tried that, also doesn’t work.

No errors in the console :frowning:

Id be happy to jump on a screenshare with someone if its easier to debug.

4

Hi again @AshCloudshelf

Another thing to check is that App Bridge is loading correctly, in your HTML , confirm you have:

<head>
  <meta name="shopify-api-key" content="YOUR_CLIENT_ID" />
  <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
</head>

I’m also digging into this on my side to see if this is a sales channel limitation.

5

Hi @Liam-Shopify

We do that have that, and I know it’s working because i have access to the Shopify global, and I can open modals etc.

6

Thanks for confirming @AshCloudshelf

I’ve checked if there was some kind of restriction on sales channels for these components and we could set up the navMenu:

20-33-g40qk-vw28q
20-33-g40qk-vw28q1294×420 30.9 KB

Digging into what else could be blocking this.

7

Thanks for the continued support.

If there’s a test script I can run to get you some logs let me know.

Or I can jump on a call and show someone if needed.

8

I am facing a similar kind of issue, @AshCloudshelf let me know if you can help me out in this if it is resolved for you.