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

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:



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


    <a href="/" rel="home">Home</a>
    <a href="/templates">Templates</a>
    <a href="/settings">Settings</a>


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)

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 or the Shopify Web Design and Development Blog

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.