App Bridge React 4: NavigationMenu → NavMenu (+ prop changes)

[mohab-sameh]

Component renamed with different usage (children links instead of props). https://shopify.dev/docs/api/app-bridge/migration-guide

Before

import {NavigationMenu} from '@shopify/app-bridge-react';

<NavigationMenu
  navigationLinks={[
    {label: 'Home', destination: '/'},
    {label: 'Settings', destination: '/settings'},
]}/>

After

import {NavMenu} from '@shopify/app-bridge-react';

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

Detect:

• Import/JSX of NavigationMenu.
• Props navigationLinks/matcher.

Edge cases:

• First child must be the home route (rel="home"); ensure it exists.

Reference:

• “Navigation Menu renamed to Nav Menu” (App Bridge React v4 migration):
  https://shopify.dev/docs/api/app-bridge/migration-guide#navigation-menu-renamed-nav-menu (Shopify)