Implementing <ui-nav-menu> for "Built by Shopify" Badge - NPM or CDN?

[shopcoderchris]

I'm currently working towards earning the coveted "Built by Shopify" badge, and I've encountered some confusion regarding the implementation of the app navigation. It has come to my attention that there exists a new CDN-only version of the Shopify App Bridge, which boasts the capability to incorporate the <ui-nav-menu> feature. As of now, I am already utilizing the most up-to-date NPM versions of both the app bridge and app bridge react.

My main query is whether I can create the desired navigation menu (as detailed here: link to documentation) using the current NPM versions, or if it's imperative to switch to the new CDN version. Furthermore, should I opt for the new CDN version, is it possible to seamlessly integrate it with my existing setup?

Any insights or guidance on this matter would be greatly appreciated. Thank you in advance for your assistance!

[babysoftluke]

i've been using "https://unpkg.com/@shopify/app-bridge@3" as my main app-bridge script. i've tried implementing ui-nav-menu but cannot get it working. i've placed it in my `head` but for some reason it gets placed into my app body and actually renders in my app.

i tried setting latest version of app-bridge CDN specifically:

https://cdn.jsdelivr.net/npm/@shopify/app-bridge@3.7.9/umd/index.min.js

and then even tried the NPM version through my app package.json but no juice...

right now i'm utilizing `NavigationMenu` loaded in from "@shopify/app-bridge object but would rather move to ui-nav-menu. 

[babysoftluke]

Yo chris - 5 minutes later and i've got it lol. They changed the way app-bridge loads in completely.

place this script as the first thing in your HTML head:

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

if you still need to use `createApp` etc -- i've ended up pulling that from my NPM app bridge and not from that script above but guessing there is a way to pull that in properly.

but if you use this setup, it renders the navigation properly in admin.

here's the docs i found: https://shopify.dev/docs/api/app-bridge-library#getting-started and then reference the Navigation Menu

[shopcoderchris]

Hi Luke, 

Thanks, I was able to get that far, but it looks like it fully refreshes the embedded iframe now. 

[ericute]

@shopcoderchris  @babysoftluke I'm trying to achieve the Side Navigation in the Admin menu as well. I got it to work with NavigationMenu but not in the ui-nav-menu. I can't figure out where I should place it.

I'm using React with Next.js for Theme App Extension. I have a SideNavigation component (from my original embedded app) so I initially tried this:

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

I was hoping it would just work even though I thought it was never going to. I tried it anyway.

Then, I tried putting it above the {% schema %} of `app-embed.liquid` but that did nothing as well. No menu showed up.

Can you lead me in the right direction? Also, have you fixed the full refresh issue?

[shopcoderchris]

@ericute I ended up just using NavigationMenu. 

[ericute]

I see. Thanks for the response, @shopcoderchris! 

[Jean_Baptichon]

It is most of the time good to try something new like the new CDN version

[Jean_Baptichon]

Whoa whoa whoa!