Can we create a nested NavMenu component?

[saurabhbarnwal]

I am using the NavMenu component from Shopify App Bridge React to create in-app navigation. I want to create a submenu, such as under a "Settings" menu, with options like "Profile Settings" and "General Settings." Is this possible?

https://shopify.dev/docs/api/app-bridge-library/react-components/navmenu-component. 

[mageplaza-cs]

Hi @saurabhbarnwal 

I am from Mageplaza - Shopify solution expert.

Yes, you can create submenus in the Shopify App Bridge React NavMenu component by nesting NavMenu.Item components within parent menu items. Here's how to implement a "Settings" submenu:

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

function AppNavigation() {
  return (
    <NavMenu>
      {/* Main navigation items */}
      <NavMenu.Item title="Home" url="/" />
      <NavMenu.Item title="Orders" url="/orders" />
      
      {/* Settings submenu */}
      <NavMenu.Item title="Settings">
        <NavMenu.Item 
          title="Profile Settings" 
          url="/settings/profile" 
        />
        <NavMenu.Item 
          title="General Settings" 
          url="/settings/general" 
        />
      </NavMenu.Item>
    </NavMenu>
  );
}

Key points:

1. The parent "Settings" item has nested NavMenu.Item components as its children
2. Submenu items follow the same syntax as regular menu items
3. The submenu will appear automatically when users interact with the parent item
4. URL paths should correspond to your app's routing configuration

This creates a hierarchical menu structure where:

• "Settings" appears as a top-level menu item
• Clicking/hovering "Settings" reveals the submenu options
• Submenu items navigate to their respective URLs when clicked

Remember to:

1. Set up proper routing in your app to handle the URLs
2. Follow Shopify's design guidelines for navigation
3. Test menu behavior on different devices and screen sizes

The nested menu structure will automatically handle accessibility attributes and keyboard navigation according to Shopify's standards.

Please let me know if it works as expected!

Best regards!