Embedded App Bridge Navigation Not Shown

Shopify Apps
1

Hi, my code is the following.

I successfully create app with appbridge and create links. But I cannot see the navigation menu on the left side of the shopify admin app navigation. Also it renders “Home” but not Settings. Active link is setted as “Settings”. It seems it is not working. I expect to see Settings navigation under my app but there is no navigation there. It is not sale channels but apps. Am I missing here something? Any help will be appreciated.

I use tunnel ngrok free app.

"use client";

import createApp from "@shopify/app-bridge/development";
import {
  AppLink,
  NavigationMenu,
} from "@shopify/app-bridge/actions";

export default function Home() {
  const app = createApp({
    apiKey:
      process.env.NEXT_PUBLIC_SHOPIFY_CLIENT_ID ||
      (() => {
        throw new Error("NEXT_PUBLIC_SHOPIFY_CLIENT_ID is not defined");
      })(),
    host: new URLSearchParams(window.location.search).get("host")!,
    forceRedirect: true,
  });
  const home = AppLink.create(app, { label: "Home", destination: "/" });
  const settings = AppLink.create(app, {
    label: "Settings",
    destination: "/settings",
  });

  NavigationMenu.create(app, { items: [home, settings], active: settings });
  return <>Home</>;
}
2

Hi @melipeli

you should follow this guide https://shopify.dev/docs/api/app-bridge/previous-versions/actions/menu/navigation

3

Hi @BiDeal-Discount ,

Firstly thank you for replying. However, documentation is not up to date. There are some changes on the new app bridge version. My problem is still exist. Do you have any other ideas? Thank you in advance.

https://shopify.dev/docs/api/app-bridge/migration-guide