mega-menu-builder

What this skill does

# 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

| Platform | Recommended Approach | Why |
|----------|---------------------|-----|
| **Shopify** | Configure nested menus in **Navigation** admin + use an OS2.0 theme that supports mega menus (Impulse, Empire, Prestige) or install **Meteor Mega Menu** app | Shopify's Navigation admin supports 3-level menus; premium themes like Impulse include built-in mega menu sections with image and banner support |
| **WooCommerce** | Use **Max Mega Menu** plugin (free/pro) or **WP Mega Menu** with your existing WordPress theme | Max Mega Menu integrates with any WordPress theme, adds image widgets and custom content to any menu item, and works with Elementor and Gutenberg |
| **BigCommerce** | Use **Header & Navigation** section in the Theme Editor with a theme that supports mega menus (Cornerstone Advanced, Merchant); or install **Shogun** page builder which includes mega menu blocks | BigCommerce themes vary in mega menu support; Cornerstone Advanced has a built-in mega menu; Shogun adds it to any theme |
| **Custom / Headless** | Build a data-driven mega menu component with hover/focus open logic, keyboard navigation (arrow keys, Escape), and a mobile accordion drawer | Full control over content model, animations, and accessibility patterns; see implementation below |

### 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:**
```jsx
// 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):**
```jsx
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>
  );
}
```

```css
.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