App bridge ui-nav-menu reloads iframe for embedded apps

Shopify Partner
3 0 3


I'm trying to migrate to the CDN version of app-bridge.

In the new version <ui-nav-menu> element has replaced <NavigationMenu> component. The documentation looked straight forward, but iframe reloads with every navigation.


Everything was fine with <NavigationMenu>. I used it like this:

{label: 'Dashboard', destination: '/dashboard'},
{label: 'Settings', destination: '/settings'},
]} matcher={(link, location) => link.destination === location.pathname} />

The new version:

    <a href="/" rel="home">App</a>
    <a href="/dashboard">Dashboard</a>
    <a href="/settings">Settings</a>

But app reloads and looses all state on every navigation.


App frontend is a React SPA. Shopify sends a request to the app backend ( App checks authentication and redirects to the endpoint that serves frontend static files


Does anyone have any idea on what to do?

Replies 3 (3)

7 0 0

i have the very same issue

Shopify Partner
3 0 1

You should implement custom router for sync host and iframe urls

Shopify Partner
17 0 5

In app-bridge-react 4.x.x is not possible to use this approach