How to add snippets to the head tag when using Theme App Extension (for <ui-nav-menu>)?

ericute · ‎10-30-2023

My original code uses @Shopify/app-bridge-react. Snippet below.

import { NavigationMenu } from '@shopify/app-bridge-react'
...
...
return (
    <NavigationMenu
      navigationLinks={[
        {
          label: 'Menu 1',
          destination: '/menu1',
        },
        {
          label: 'Menu 2',
          destination: '/menu2',
        },
        {
          label: 'Menu 3',
          destination: '/menu3',
        },
      ]}
      matcher={(link, location) => link.destination === location.pathname}
    />
  )

And it is working in the Shopify Admin navigation:

But, Shopify recommends to use the <ui-nav-menu> and the way to do it is by adding it to the <head> tag.

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

I can't figure out how to add code snippet to the <head> tag. I am using app embed blocks. I tried adding it above my {% schema %} but it didn't work.

Liam · ‎11-01-2023

HI Ericute,

It's possible that you don't have the latest version of App Bridge set up correctly on your app. You'll need to include the `app-bridge.js` script in the head element as is described here. Then you should be able to render the ui-nav-menu element.

Hope this helps,

Liam | Developer Advocate @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

ericute · ‎11-01-2023

@Liam with the Theme App Extension, where should I find that <head> tag? That's why I can't make it work because I don't know where to insert it.

I've placed it somewhere in my app-embed.liquid and I added it in my _app.js but it didn't work.