Catalyst Integration: Hypa Apps’ Mega Menu Builder

Hypa Apps has announced support for integrating another one of their apps, Mega Menu Builder, with Catalyst! If you’re an existing user of Mega Menu curious about integrating it into future Catalyst storefronts, or you’re simply curious about customizable navigation menus, this is for you!

If you’d like to learn more from Tom Robertshaw and the Hypa team,

or click here to read their article!

What is Mega Menu Builder?

Mega Menu Builder allows you to create customizable, visually engaging navigation menus for your store, offering full control over design and layout. You can enhance menus with images, restrict access to specific items for logged-in users, and easily manage large menus with spreadsheet import/export.

Hypa Apps aims to streamline the process of adding a feature-rich Mega Menu to BigCommerce Catalyst storefronts, offering both flexibility for customization and simplicity for developers.

For Mega Menu Builder’s integration into Catalyst, Hypa Apps targeted two levels of integration:

1. Fetching Menu Items

Developers can use the provided npm package (@hypa-apps/mega-menu-builder) to fetch menu items from the Mega Menu Builder API. By importing the getHypaMenuItems function and passing the BigCommerce store hash and menu code, developers can easily retrieve menu data.

This is a great option for developers who want to maintain more control over the storefront experience.

2. React Component Integration

For those who prefer a pre-built frontend solution, Hypa Apps provides a React component, MegaMenuBuilder, that replicates the Mega Menu experience. Developers can import this component and pass necessary props like store hash, menu items, and theme, desktop or mobile, to integrate the Mega Menu seamlessly into their storefront.

This is a great option for anyone who wants to mimic a Mega Menu from a Stencil-based environment.

Let’s talk implementation

👉 Option #1: Fetching Menu Items

First, install the first version of the Mega Menu npm package

npm install @hypa-apps/mega-menu-builder

Now, you can add a new function to fetch the menu items. They recommend adding this file to client/queries/get-hypa-menu-items.ts. You’ll note that this calls for both the BigCommerce store hash and the code for the menu you’re going to use, which you can find in your Menu settings.

import { MenuItem } from '@hypa-apps/mega-menu-builder/dist/types';

export const getHypaMenuItems = async (storeHash: string, menuCode: string): Promise<MenuItem[]> => {

const path = `https://megamenu.hypaapps.com/megamenubuilder/${storeHash}/${menuCode}`;

try {

const response = await fetch(path);

// eslint-disable-next-line @typescript-eslint/consistent-type-assertions

const data = (await response.json()) as { data: MenuItem[] };

return data.data;

} catch (error) {

return [];

}

};

👉 Option #2: React Component Integration

First, add a few imports
- import { MegaMenuBuilder } from "@hypa-apps/mega-menu-builder" import { MenuItem } from '@hypa-apps/mega-menu-builder/dist/types'; import '@hypa-apps/mega-menu-builder/dist/css/mega-menu-builder.css'; import { getHypaMenuItems } from '~/client/queries/get-hypa-menu-items';
Use their helper to fetch your menu items:
- const menuItems = await getHypaMenuItems(process.env.BIGCOMMERCE_STORE_HASH, process.env.HYPA_MENU_CODE);
Add a HYPA_MENU_CODE to your environment variables, which you can find by opening the Mega Menu Builder app and opening your Settings tab.
Replace the default Navigation component - below is example code for both desktop and mobile.

🖥️ Desktop:

<MegaMenuBuilder

className="hidden lg:block"

code={process.env.HYPA_MENU_CODE}

menuItems={menuItems}

storeHash={process.env.BIGCOMMERCE_STORE_HASH}

theme="desktop"

📱 Mobile:

<MegaMenuBuilder

code={process.env.HYPA_MENU_CODE}

menuItems={menuItems}

storeHash={process.env.BIGCOMMERCE_STORE_HASH}

theme="mobile"

</NavigationMenuCollapsed>

To learn even more about implementation, read Tom Robertshaw of Hypa Apps’ blog here!

What’s next?

You’re all set! Give Mega Menu Builder a try and let us know what you think!

Have feedback or feature ideas? Hypa Apps welcomes it! Reach out to Tom Robertshaw on Linkedin, or reach out to Hypa Apps’ support at support@hypaapps.com.

If you have questions, feedback, or issues implementing, please reach out to our DevRel team or join our Developer Community TODAY!