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

Retired Boards Appdev Extensions

Topic summary

A developer is trying to implement Shopify’s recommended <ui-nav-menu> element for app navigation but cannot determine where to add the required code snippet to the <head> tag when using Theme App Extensions.

Current situation:

  • Their existing navigation works using @shopify/app-bridge-react’s NavigationMenu component
  • They’re using app embed blocks in their theme
  • Shopify documentation recommends switching to <ui-nav-menu> (added directly to HTML head)

Problem:
With Theme App Extensions, there’s no clear <head> tag location to insert the <ui-nav-menu> element. They’ve attempted adding it to:

  • app-embed.liquid
  • _app.js

Neither approach worked.

Suggested solution:
One response recommends ensuring the latest App Bridge (app-bridge.js script) is properly included in the head tag, but this doesn’t address the core question of where to place code within the Theme App Extension structure.

Status: Unresolved - the developer still needs guidance on the correct file/location for adding head elements in Theme App Extensions.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

My original code uses** @Shopify_77 /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
ericute_0-1698713505703.png244×606 8.63 KB

But, Shopify recommends to use the and the way to do it is by adding it to the tag.

ericute_1-1698712893115.png
ericute_1-1698712893115.png777×176 11 KB

<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 tag. I am using app embed blocks. I tried adding it above my {% schema %} but it didn’t work.

1 Like
2

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,

3

@Liam with the Theme App Extension, where should I find that 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.

1 Like