App Navigation doesn't show up

App Bridge
1

We are migrating our nextjs app from CSR to SSR and the App Navigation disappeared

In our current CSR code we use the App Bridge NavMenu component with <a> tags for the link and it’s working in production.

on the SSR code in our dev environment (not local) the navigation disappeared.
we tried to use the <ui-nav-menu> component straight, and also the <s-app-nav> with <s-link> or <a> tags but nothing seems to work. we tried also to render these components only after appbridge loaded, or add/remove the polaris.js but nothing seems to work.

The components are rendered to the html, but not added to the Left Navigation Menu

Technical Details:

  • NextJS 14.2.30 (Pages Router)
  • Node 25
  • @shopify/app-bridge-react v4.2.8
  • @shopify/app-bridge-types v0.5.3
  • Appbridge CDN version
2

@nirtayeb Can you share the snippet you are using to for setting the app navigation?

3

Sure:

This is what working for us with CSR, but doesn’t work with SSR
```

export const NavigationMenu = () => {
const navMenu = [...];
return (
<NavMenu>
          <a href={"/home"} rel={"home"}>
            Home
          </a>
          {navMenu.map((link: NavItem) => {
            const icon = link.renderIcon && link.renderIcon(userData);
            return (
              <a href={link.destination} key={link.destination}>
                {link.label}
                {icon && ` ${icon}`}
              </a>
            );
          })}
        </NavMenu>
);
}

it loaded from _app.tsx under

<AppProvider i18n={en}>
   <NavigationMenu />
</AppProvider>

in my _document.tsx:

<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js" type="text/javascript"></script>

I also tried the same with s-app-nav and s-link tags:

<s-app-nav>
          <s-link href={"/home"}>
            Home
          </s-link>
          {navMenu.map((link: NavItem) => {
            const icon = link.renderIcon && link.renderIcon(userData);
            return (
              <s-link href={link.destination} key={link.destination}>
                {link.label}
                {icon && ` ${icon}`}
              </s-link>
            );
          })}
        </s-app-nav>

tried also s-app-nav with a tags as well and <ui-nav-menu> with <a> tags.
(and with/without the polaris.js:
<script type="text/javascript" src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>)

4

@Fio any insight? is there anyway I can help to debug?

5

If you remove the icon, does it still not render?