Mega Menu Builder

Mega Menu Builder

Overview

Build a horizontal navigation bar that expands into full-width panels containing category columns, featured product cards, and promotional banners. The mega menu is driven by content manageable in your platform's admin, supports keyboard navigation and screen readers, and degrades gracefully to a mobile hamburger drawer.

When to Use This Skill

• When a store has 3+ top-level categories, each with significant sub-categories
• When the navigation needs to surface promotional content (seasonal banners, featured products) alongside category links
• When rebuilding navigation as part of a storefront redesign
• When the current dropdown menu is not accessible to keyboard or screen reader users
• When navigation content needs to be managed by a merchandiser without code deploys

Core Instructions

Step 1: Determine the merchant's platform and choose the right approach

Step 2: Set up navigation content

---

Shopify

Configuring nested navigation:

1. Go to Online Store → Navigation 2. Open your Main menu (or create one) 3. For each top-level item that needs a mega panel, click Add menu item and nest sub-items under it using the indent controls 4. Shopify supports up to 3 levels of nesting (top → category → sub-category) 5. Save the menu

Enabling mega menu in a compatible theme:

If using a theme with built-in mega menu support (Impulse, Prestige, Empire): 1. Go to Online Store → Themes → Customize 2. Navigate to the Header section 3. Under Mega menu settings, select which top-level nav items should trigger the mega panel vs. a simple dropdown 4. For each mega panel, add image blocks, featured product blocks, and promotional banner blocks using the section editor

Using Meteor Mega Menu app (works with any Shopify theme): 1. Install from the Shopify App Store 2. In the app, select which menu items get mega panels 3. For each panel, add columns of links, product cards (pulled from your Shopify catalog), and image/banner blocks 4. The app injects the mega menu into your theme without editing theme code

---

WooCommerce

Using Max Mega Menu (free tier): 1. Install Max Mega Menu from WordPress.org 2. Go to Appearance → Menus and open your primary navigation menu 3. Enable Max Mega Menu for this menu via the Max Mega Menu Settings panel 4. For each top-level menu item that should have a mega panel:

• Click the Mega Menu toggle on the item
• Select the panel layout (e.g., 3 columns)

5. In each column, add menu items, widgets (images, HTML, WooCommerce product widgets), or text blocks 6. Go to Appearance → Max Mega Menu → Appearance to set the panel width to full-width and configure hover behavior

Integrating with Elementor: If your store uses Elementor, install Happy Addons or ElementsKit — both include a drag-and-drop mega menu builder that works within Elementor's visual editor.

---

BigCommerce

Cornerstone Advanced theme: 1. Go to Storefront → My Themes → Customize 2. In the Header section, find Navigation style and set it to Mega Menu 3. For each top-level category, you can add a featured image and banner in the Category settings (Products → Categories → [category] → Image) 4. BigCommerce automatically populates the mega panel with sub-categories; the theme renders them in a multi-column layout

Shogun page builder: 1. Install Shogun from the BigCommerce App Marketplace 2. Use Shogun's Header component to build a custom mega menu with full drag-and-drop control over columns, images, and links 3. Publish the header globally across all pages

---

Custom / Headless

Navigation component with hover/focus open logic:

// MegaNav.jsx
import { useState, useRef } from 'react';

export function MegaNav({ items }) {
  const [activeItem, setActiveItem] = useState(null);
  const closeTimer = useRef(null);

  function openMenu(id) { clearTimeout(closeTimer.current); setActiveItem(id); }
  function scheduleClose() { closeTimer.current = setTimeout(() => setActiveItem(null), 150); }
  function cancelClose() { clearTimeout(closeTimer.current); }

  return (
    <nav aria-label="Main navigation">
      <ul role="menubar" className="nav-bar">
        {items.map(item => (
          <li key={item.id} role="none"
              onMouseEnter={() => item.megaMenu && openMenu(item.id)}
              onMouseLeave={scheduleClose}>
            <a href={item.url} role="menuitem"
               aria-haspopup={item.megaMenu ? 'true' : undefined}
               aria-expanded={activeItem === item.id ? 'true' : undefined}
               onFocus={() => item.megaMenu && openMenu(item.id)}
               onKeyDown={(e) => {
                 if ((e.key === 'ArrowDown' || e.key === 'Enter') && item.megaMenu) {
                   e.preventDefault();
                   openMenu(item.id);
                   document.querySelector(`#panel-${item.id} a`)?.focus();
                 }
                 if (e.key === 'Escape') setActiveItem(null);
               }}>
              {item.label}
            </a>
            {item.megaMenu && activeItem === item.id && (
              <MegaPanel id={`panel-${item.id}`} panel={item.megaMenu}
                onMouseEnter={cancelClose} onMouseLeave={scheduleClose}
                onClose={() => setActiveItem(null)} />
            )}
          </li>
        ))}
      </ul>
    </nav>
  );
}

Mega panel layout (columns + featured products + banner):

function MegaPanel({ id, panel, onMouseEnter, onMouseLeave, onClose }) {
  return (
    <div id={id} className="mega-panel" role="region"
         onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
      <div className="mega-panel-inner">
        <div className="mega-columns">
          {panel.columns.map(col => (
            <div key={col.heading} className="mega-column">
              <p className="column-heading">{col.heading}</p>
              <ul>
                {col.links.map(link => (
                  <li key={link.url}><a href={link.url} onClick={onClose}>{link.label}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        {panel.banner && (
          <a href={panel.banner.url} className="mega-banner" onClick={onClose}>
            <img src={panel.banner.image} alt={panel.banner.alt} loading="lazy" />
            <span className="banner-cta">{panel.banner.cta}</span>
          </a>
        )}
      </div>
    </div>
  );
}

.mega-panel {
  position: absolute; top: 100%; left: 0; width: 100vw;
  background: #fff; border-top: 2px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 100;
}
.mega-panel-inner {
  display: grid; grid-template-columns: 1fr 1fr 1fr 200px;
  gap: 2rem; max-width: 1200px; margin: 0 auto; padding: 2rem;
}
@media (max-width: 768px) { .mega-panel { display: none; } }

Step 3: Set up the mobile hamburger drawer

All platforms need a touch-friendly mobile navigation to replace the desktop mega menu:

• Shopify: Modern OS2.0 themes include a built-in mobile drawer — configure it in Online Store → Themes → Customize → Mobile Menu
• WooCommerce: Max Mega Menu has a built-in mobile mode that converts the mega menu to an accordion drawer; configure in Appearance → Max Mega Menu → Mobile Menu
• BigCommerce: Cornerstone's mobile navigation drawer is built in; configure the hamburger button position in the Theme Editor
• Custom: Build a <dialog> or position:fixed side drawer with accordion-style category expansion; apply overflow:hidden to <body> when open

Best Practices

• Drive menu content from the CMS/admin — merchandisers should update banners and featured products without engineering help
• Use a 150 ms close delay — prevents the panel from disappearing when the cursor briefly leaves the nav while moving toward the panel
• Position the panel with `position:absolute` on the nav bar — not on the individual list item, so the panel spans full viewport width
• Lazy-load panel images — featured product and banner images should use loading="lazy" since they are not above the fold
• Test on touch devices — hover events do not fire on iOS/Android; mega menu apps and plugins handle this; for custom builds, use tap-to-open for top-level items on touch

Common Pitfalls

Related Skills

• @responsive-storefront
• @accessibility-commerce
• @product-categorization
• @storefront-theming

Accessibility Audit and Fix for a Storefront Navigation Bar

Problem/Feature Description

A fashion e-commerce startup recently launched their site and received a failing score on an automated accessibility audit. Their primary complaint from assistive technology users is that the navigation dropdown menus are completely unreachable by keyboard — only mouse users can open them. The QA team also flagged that screen readers announce the nav structure incorrectly, with no indication that items have expandable sub-panels.

You have been handed their existing navigation component (provided below) and asked to bring it up to WCAG 2.1 AA. Specifically: screen readers must understand the menu structure and expansion state, keyboard users must be able to navigate between top-level items and open/close panels using standard keys, and the component must handle the close-on-move-away behavior cleanly without panels flickering when the cursor travels diagonally toward the panel.

Output Specification

Produce the following files:

• MegaNav.jsx — the corrected navigation bar component with full keyboard support and correct ARIA attributes
• accessibility-notes.md — a brief document listing each change you made and the specific ARIA or keyboard pattern it addresses

Input Files

The following files are provided as inputs. Extract them before beginning.

=============== FILE: inputs/MegaNav.jsx =============== import { useState } from 'react'; import MegaPanel from './MegaPanel';

// ACCESSIBILITY ISSUES: This component has multiple a11y problems to fix. export function MegaNav({ items }) { const [activeItem, setActiveItem] = useState(null);

return ( <nav> <ul className="nav-bar"> {items.map((item, index) => ( <li key={item.id} onMouseEnter={() => item.megaMenu && setActiveItem(item.id)} onMouseLeave={() => setActiveItem(null)}> <a href={item.url}> {item.label} </a> {item.megaMenu && activeItem === item.id && ( <MegaPanel panel={item.megaMenu} onClose={() => setActiveItem(null)} /> )} </li> ))} </ul> </nav> ); }

Navigation Panel Components for an Online Apparel Store

Problem/Feature Description

A mid-size apparel retailer is rebuilding their storefront navigation. The merchandising team frequently rotates seasonal banners and swaps in featured products during promotions — they need to be able to do this without filing engineering tickets. The tech lead has decided to drive the navigation structure from a JSON payload returned by their headless CMS, so the same component code works for every campaign.

Your task is to build the React components that render a mega menu panel from that CMS payload. The panel should display category columns on the left, a featured-products strip in the middle, and a promotional banner on the right. The site has a performance-conscious audience and the tech lead cares about a smooth, fast page experience.

Output Specification

Produce the following files:

• MegaPanel.jsx — the React component that renders a single mega menu panel given a panel prop (matching the structure in the provided data)
• MegaNav.jsx — a minimal navigation bar that renders a list of top-level items and mounts MegaPanel for any item with a megaMenu field; it must handle both hover open/close and clean up any timers
• navigation.js — a data-fetching helper that retrieves the navigation JSON from a CMS endpoint and is wired for Next.js ISR caching
• mega-panel.css — CSS for the mega panel layout and the responsive breakpoint that handles small screens

Input Files

The following files are provided as inputs. Extract them before beginning.

=============== FILE: inputs/nav-data-sample.json =============== [ { "id": "womens", "label": "Women's", "url": "/collections/womens", "megaMenu": { "columns": [ { "heading": "Clothing", "links": [ { "label": "Tops", "url": "/collections/womens-tops" }, { "label": "Bottoms", "url": "/collections/womens-bottoms" }, { "label": "Dresses", "url": "/collections/womens-dresses" } ] }, { "heading": "Shoes", "links": [ { "label": "Sneakers", "url": "/collections/womens-sneakers" }, { "label": "Boots", "url": "/collections/womens-boots" } ] } ], "featuredProducts": [ { "id": "prod_001", "name": "Summer Dress", "price": 89, "image": "/images/summer-dress.jpg", "url": "/products/summer-dress" }, { "id": "prod_002", "name": "Linen Blazer", "price": 120, "image": "/images/linen-blazer.jpg", "url": "/products/linen-blazer" } ], "banner": { "image": "/images/nav-banner-womens.jpg", "alt": "New summer collection", "url": "/collections/summer-2026", "headline": "Summer Collection", "cta": "Shop Now" } } }, { "id": "mens", "label": "Men's", "url": "/collections/mens", "megaMenu": null }, { "id": "accessories", "label": "Accessories", "url": "/collections/accessories", "megaMenu": { "columns": [ { "heading": "Bags", "links": [ { "label": "Totes", "url": "/collections/totes" }, { "label": "Backpacks", "url": "/collections/backpacks" } ] } ], "featuredProducts": [], "banner": { "image": "/images/nav-banner-accessories.jpg", "alt": "New accessories arrivals", "url": "/collections/new-accessories", "headline": "New Arrivals", "cta": "Explore" } } } ]

Mobile Navigation Drawer for a Storefront Mega Menu

Problem/Feature Description

A sportswear brand's desktop site has a working mega menu, but their mobile experience is broken. On phones, the full-width hover panels don't work (touch events differ from hover events), and the current fallback just hides the navigation entirely. Analytics show that over 60% of traffic is on mobile, so the team needs a proper mobile navigation drawer before their next product launch.

The solution should be a side drawer that slides in when a hamburger button is tapped. Inside the drawer, categories that have sub-links should expand accordion-style when tapped. When the drawer is open, users should not be able to accidentally interact with content behind it. The tech lead has also asked that the CSS for the desktop mega panel be updated so it is fully hidden at the mobile breakpoint, since the drawer replaces it entirely.

Output Specification

Produce the following files:

• MobileNav.jsx — the mobile navigation drawer component
• mega-panel.css — CSS that includes the desktop mega panel styles AND the responsive rule that hides it on small screens; also include any body-level styles needed when the drawer is open
• implementation-notes.md — a short document describing how focus management works in the drawer and how body scroll is handled when the drawer is open

Input Files

The following files are provided as inputs. Extract them before beginning.

=============== FILE: inputs/nav-data-sample.json =============== [ { "id": "running", "label": "Running", "url": "/collections/running", "megaMenu": { "columns": [ { "heading": "Men's Running", "links": [ { "label": "Shorts", "url": "/collections/mens-running-shorts" }, { "label": "Tops", "url": "/collections/mens-running-tops" }, { "label": "Shoes", "url": "/collections/mens-running-shoes" } ] }, { "heading": "Women's Running", "links": [ { "label": "Leggings", "url": "/collections/womens-leggings" }, { "label": "Sports Bras", "url": "/collections/sports-bras" }, { "label": "Shoes", "url": "/collections/womens-running-shoes" } ] } ], "featuredProducts": [], "banner": null } }, { "id": "training", "label": "Training", "url": "/collections/training", "megaMenu": { "columns": [ { "heading": "Equipment", "links": [ { "label": "Weights", "url": "/collections/weights" }, { "label": "Resistance Bands", "url": "/collections/bands" } ] } ], "featuredProducts": [], "banner": null } }, { "id": "sale", "label": "Sale", "url": "/collections/sale", "megaMenu": null } ]