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

ericute
Shopify Partner
57 4 7

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:

ericute_0-1698713505703.png

 

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

ericute_1-1698712893115.png

<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. 

 

Replies 2 (2)

Liam
Shopify Staff
2731 302 783

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
Shopify Partner
57 4 7

@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.