How do I customise the menu HTML?

Mega Menu Builder comes with an out-of-the-box responsive template. You can choose to customise this, or even provide your own set of styles. 

Customize with CSS

If you wish to create your own implementation of a Mega Menu, you can use Mega Menu Builder for menu management and then create your own styles. 

When adding your menu widget with PageBuilder, choose the "No Theme" option. This will add the menu to the page without any styles. It will also not hide your default navigation. 

We provide succinct but descriptive semantic HTML so that you can achieve almost any type of mega menu you like without having to modify the HTML. 

For reference, an example HTML outout would be:

<div class="s48meganav megamenu-visible">
  <span class="menu-back-btn">Back</span>
  <nav class="menu-block nav nav--responsive" data-space48-menu="main-menu">
    <ul class="menu-block__depth-0">
      <li class="menu-block--item menu-block__depth-0--item menu-block__tag- has-children"
        data-url="/kitchen-and-bathroom.html">
        <a href="/kitchen-and-bathroom.html" title="Kitchen & Bathroom"
          class="menu-block--link menu-block__depth-0--link">
          <span class="menu_block--heading menu_block__depth-0--heading">Kitchen & Bathroom</span>
        </a>
        <div class="menu-block--wrapper menu-block__depth-1--wrapper">
          <ul class="menu-block__depth-1">
            <li class="menu-block--item menu-block__depth-1--item menu-block__tag- has-children"
              data-url="/kitchen.html">
              <a href="/kitchen.html" title="Kitchen" class="menu-block--link menu-block__depth-1--link">
                <img src="/content/fitted-kitchens-_be64c3ea1e16c124c43626aca6da3be0f6d13213.webp"
                  class="menu-block--image menu-block__depth-1--image" alt="">
                <span class="menu_block--heading menu_block__depth-1--heading">Kitchen</span>
              </a>
              <div class="menu-block--wrapper menu-block__depth-2--wrapper">
                <ul class="menu-block__depth-2">
                  <li class="menu-block--item menu-block__depth-2--item menu-block__tag- has-no-children"
                    data-url="/kitchen-doors.html">
                    <a href="/kitchen-doors.html" title="Kitchen doors"
                      class="menu-block--link menu-block__depth-2--link">
                      <span class="menu_block--heading menu_block__depth-2--heading">Kitchen doors</span>
                    </a>
                  </li>
                  <li class="menu-block--item menu-block__depth-2--item menu-block__tag- has-no-children"
                    data-url="/kitchen-cabinets.html">
                    <a href="/kitchen-cabinets.html" title="Cabinets"
                      class="menu-block--link menu-block__depth-2--link">
                      <span class="menu_block--heading menu_block__depth-2--heading">Cabinets</span>
                    </a>
                  </li>
                  <li class="menu-block--item menu-block__depth-2--item menu-block__tag- has-no-children"
                    data-url="/sinks.html">
                    <a href="/sinks.html" title="Sinks" class="menu-block--link menu-block__depth-2--link">
                      <span class="menu_block--heading menu_block__depth-2--heading">Sinks</span>
                    </a>
                  </li>
                  <li class="menu-block--item menu-block__depth-2--item menu-block__tag- has-no-children"
                    data-url="/taps.html">
                    <a href="/taps.html" title="Taps" class="menu-block--link menu-block__depth-2--link">
                      <span class="menu_block--heading menu_block__depth-2--heading">Taps</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="menu-block--item menu-block__depth-1--item menu-block__tag- has-children"
              data-url="/kitchen-worktops.html">
              <a href="/kitchen-worktops.html" title="Kitchen worktops"
                class="menu-block--link menu-block__depth-1--link">
                <img src="/content/solid-wood-worktops_5653efd305e7cedbb13eab76f44c11a8fc21ecba.webp"
                  class="menu-block--image menu-block__depth-1--image" alt="">
                <span class="menu_block--heading menu_block__depth-1--heading">Kitchen worktops</span>
              </a>
              <div class="menu-block--wrapper menu-block__depth-2--wrapper">
                <ul class="menu-block__depth-2">
                  <li class="menu-block--item menu-block__depth-2--item menu-block__tag- has-no-children"
                    data-url="/splashbacks.html">
                    <a href="/splashbacks.html" title="Splashbacks" class="menu-block--link menu-block__depth-2--link">
                      <span class="menu_block--heading menu_block__depth-2--heading">Splashbacks</span>
                    </a>
                  </li>
                  <li class="menu-block--item menu-block__depth-2--item menu-block__tag- has-no-children"
                    data-url="/laminate-worktops.html">
                    <a href="/laminate-worktops.html" title="Laminate Worktops"
                      class="menu-block--link menu-block__depth-2--link">
                      <span class="menu_block--heading menu_block__depth-2--heading">Laminate Worktops</span>
                    </a>
                  </li>
                  <li class="menu-block--item menu-block__depth-2--item menu-block__tag- has-no-children"
                    data-url="/solid-wood-worktops.html">
                    <a href="/solid-wood-worktops.html" title="Solid Wood Worktops"
                      class="menu-block--link menu-block__depth-2--link">
                      <span class="menu_block--heading menu_block__depth-2--heading">Solid Wood Worktops</span>
                    </a>
                  </li>
                  <li class="menu-block--item menu-block__depth-2--item menu-block__tag- has-no-children"
                    data-url="/acrylic-worktops.html">
                    <a href="/acrylic-worktops.html" title="Acrylic Worktops"
                      class="menu-block--link menu-block__depth-2--link">
                      <span class="menu_block--heading menu_block__depth-2--heading">Acrylic Worktops</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="menu-block--item menu-block__depth-1--item menu-block__tag- has-children"
              data-url="/kitchen-appliances.html">
              <a href="/kitchen-appliances.html" title="Appliances" class="menu-block--link menu-block__depth-1--link">
                <img src="/content/kitchen-appliances_591d768e238f85e27922452f1c656d9bec1da49d.webp"
                  class="menu-block--image menu-block__depth-1--image" alt="">
                <span class="menu_block--heading menu_block__depth-1--heading">Appliances</span>
              </a>
              <div class="menu-block--wrapper menu-block__depth-2--wrapper">
                <ul class="menu-block__depth-2">
                  <li class="menu-block--item menu-block__depth-2--item menu-block__tag- has-no-children"
                    data-url="/washing-machines.html">
                    <a href="/washing-machines.html" title="Washing Machines"
                      class="menu-block--link menu-block__depth-2--link">
                      <span class="menu_block--heading menu_block__depth-2--heading">Washing Machines</span>
                    </a>
                  </li>
                  <li class="menu-block--item menu-block__depth-2--item menu-block__tag- has-no-children"
                    data-url="/dishwashers.html">
                    <a href="/dishwashers.html" title="Dishwashers" class="menu-block--link menu-block__depth-2--link">
                      <span class="menu_block--heading menu_block__depth-2--heading">Dishwashers</span>
                    </a>
                  </li>
                  <li class="menu-block--item menu-block__depth-2--item menu-block__tag- has-no-children"
                    data-url="/kitchen/ovens.html">
                    <a href="/kitchen/ovens.html" title="Ovens" class="menu-block--link menu-block__depth-2--link">
                      <span class="menu_block--heading menu_block__depth-2--heading">Ovens</span>
                    </a>
                  </li>
                  <li class="menu-block--item menu-block__depth-2--item menu-block__tag- has-no-children"
                    data-url="/hobs.html">
                    <a href="/hobs.html" title="Hobs" class="menu-block--link menu-block__depth-2--link">
                      <span class="menu_block--heading menu_block__depth-2--heading">Hobs</span>
                    </a>
                  </li>
                  <li class="menu-block--item menu-block__depth-2--item menu-block__tag- has-no-children"
                    data-url="/fridges.html">
                    <a href="/fridges.html" title="Fridges" class="menu-block--link menu-block__depth-2--link">
                      <span class="menu_block--heading menu_block__depth-2--heading">Fridges</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </li>
      <li class="menu-block--item menu-block__depth-0--item menu-block__tag- has-no-children"
        data-url="/painting-and-decorating.html">
        <a href="/painting-and-decorating.html" title="Painting & Decorating"
          class="menu-block--link menu-block__depth-0--link">
          <span class="menu_block--heading menu_block__depth-0--heading">Painting & Decorating</span>
        </a>
      </li>
    </ul>
  </nav>
</div><br>

Customize HTML

While we recommend customising your menu with just CSS. It is possible to build your own menu, including HTML. 

Each time a menu is updated in our app, it creates multiple channel metafields to store the data. One metafield is used to store the top level menu items, and then separate metafields is created for the children of each top-level menu item. For example, if you have a "Top Navigation" menu that has 8 top-level navigation items, where the first 5 have children, then the following metafields will be created on the channel:

• top-navigation
• top-navigation-1
• top-navigation-2
• top-navigation-3
• top-navigation-4
• top-navigation-5

Instead of using our widget to output the menu data stored in channel metafields, you could create your own.

This is our widget template for reference:

<div class="s48meganav">
    <nav class="menu-block nav nav--{{theme}}" data-space48-menu="{{getVar 'code'}}">
        <ul class="menu-block__depth-0">
            {{#forEach _.data.channel.metafields.edges}}
            <!-- top level menu -->
            {{#if node.key '==' (getVar 'code') }}
            {{#JSONparse node.value}}
                {{#forEach items}}
                <li class="menu-block--item menu-block__depth-0--item {{tags}} {{#if has_children}}has-children{{else}}has-no-children{{/if}}" data-url="{{url}}">
                    <a href="{{#if url}}{{url}}{{else}}#{{/if}}"
                       class="{{#if url '!=' ''}}menu-block--link menu-block__depth-0--link{{else}}menu-block--no-link menu-block__depth-0--no-link{{/if}}"
                       title="{{name}}">
                        {{#if image}}
                            <img src='{{image}}' class="menu-block--image menu-block__depth-0--image" alt='{{image_alt}}' />
                        {{/if}}
                        <span class="menu_block--heading menu_block__depth-0--heading">{{name}}</span>
                    </a>
                    <!-- first level children -->
                    {{#forEach ../../../_.data.channel.metafields.edges}}
                    {{#if node.key '==' (concat (concat (getVar 'code') '-') ../id)}}
                    <div class="menu-block--wrapper menu-block__depth-1--wrapper">
                        <ul class="menu-block__depth-1">
                        {{#JSONparse node.value}}
                            {{#forEach items}}
                                <li class="menu-block--item menu-block__depth-1--item {{tags}} {{#if has_children}}has-children{{else}}has-no-children{{/if}}" data-url="{{#if url}}{{url}}{{else}}#{{/if}}">
                                    <a href="{{#if url}}{{url}}{{else}}#{{/if}}"
                                       class="{{#if url '!=' ''}}menu-block--link menu-block__depth-1--link{{else}}menu-block--no-link menu-block__depth-1--no-link{{/if}}"
                                       title="{{name}}">
                                        {{#if image}}
                                            <img src='{{image}}' class="menu-block--image menu-block__depth-1--image" alt='{{image_alt}}' />
                                        {{/if}}
                                        <span class="menu_block--heading menu_block__depth-1--heading">{{name}}</span>
                                    </a>
                                    <!-- second level children -->
                                    {{#if children}}
                                    <div class="menu-block--wrapper menu-block__depth-2--wrapper">
                                        <ul class="menu-block__depth-2">
                                            {{#forEach children}}
                                            <li class="menu-block--item menu-block__depth-2--item {{tags}} {{#if has_children}}has-children{{else}}has-no-children{{/if}}" data-url="{{#if url}}{{url}}{{else}}#{{/if}}">
                                                <a href="{{#if url}}{{url}}{{else}}#{{/if}}"
                                                   class="{{#if url '!=' ''}}menu-block--link menu-block__depth-2--link{{else}}menu-block--no-link menu-block__depth-2--no-link{{/if}}"
                                                   title="{{name}}">
                                                    {{#if image}}
                                                        <img src='{{image}}' class="menu-block--image menu-block__depth-2--image" alt='{{image_alt}}' />
                                                    {{/if}}
                                                    <span class="menu_block--heading menu_block__depth-2--heading">{{name}}</span>
                                                </a>
                                                <!-- third level children -->
                                                {{#if children}}
                                                <div class="menu-block--wrapper menu-block__depth-3--wrapper">
                                                    <ul class="menu-block__depth-3">
                                                        {{#forEach children}}
                                                        <li class="menu-block--item menu-block__depth-3--item {{tags}} {{#if has_children}}has-children{{else}}has-no-children{{/if}}" data-url="{{#if url}}{{url}}{{else}}#{{/if}}">
                                                            <a href="{{#if url}}{{url}}{{else}}#{{/if}}"
                                                               class="{{#if url '!=' ''}}menu-block--link menu-block__depth-3--link{{else}}menu-block--no-link menu-block__depth-3--no-link{{/if}}"
                                                               title="{{name}}">
                                                                {{#if image}}
                                                                    <img src='{{image}}' class="menu-block--image menu-block__depth-3--image" alt='{{image_alt}}' />
                                                                {{/if}}
                                                                <span class="menu_block--heading menu_block__depth-3--heading">{{name}}</span>
                                                            </a>
                                                        </li>
                                                        {{/forEach}}
                                                    </ul>
                                                </div>
                                                {{/if}}
                                            </li>
                                            {{/forEach}}
                                        </ul>
                                    </div>
                                    {{/if}}
                                </li>
                            {{/forEach}}
                        {{/JSONparse}}
                        </ul>
                    </div>
                    {{/if}}
                    {{/forEach}}
                </li>
                {{/forEach}}
            {{/JSONparse}}
            {{/if}}
            {{/forEach}}
        </ul>
    </nav>
</div>

You will then also need to define the `storefront_api_query` to fetch the metafield data from GraphqQL. The query would look something like this:

query metafields {
    channel {
      entityId
      metafields(
        namespace: "space48-mega-menu-builder-main-menu"
        keys: ["top-navigation", "top-navigation-1", "top-navigation-2", "top-navigation-3", "top-navigation-4", "top-navigation-5"]
      ) {
        edges {
          node {
            key
            id
            value
          }
        }
      }
    }
  }<br>