How to build a Shopify mega menu without an app (Liquid)

A mega menu is the wide, multi-column dropdown that opens under a top-level nav item: think "Shop" expanding into Men, Women, Sale, and New In, each with its own list of child links. Stores reach for an app to build one, but Shopify already gives you everything you need. The navigation a merchant edits under Online Store, Navigation is exposed to your theme as the linklists object, and any menu item can hold a nested set of child links. Render those children as columns and you have a mega menu, no app, no monthly fee, no third-party script slowing the page down.

The thing that makes this maintainable is that the structure lives in the merchant's menu, not in your Liquid. They add a child link in the admin, a new column appears. You never touch the theme again. Here is how to build it properly.

How Shopify navigation maps to a mega menu

Every menu in the store is reachable through linklists, keyed by handle. The default header menu is usually main-menu. Each entry in linklists['main-menu'].links is a link object with a title, a url, and (this is the part that matters) its own links array of child links. Shopify menus support two levels of nesting in the admin, which is exactly the depth a mega menu needs: top-level items as triggers, their children grouped into columns.

• link.links is the array of child links under a menu item.
• link.links.size tells you how many children there are, so you can decide whether an item is a flat link or a mega-menu trigger.
• link.active is true when the current page is under that link, which lets you highlight the section the shopper is browsing.

Build it as a section with a menu picker

Do not hardcode main-menu in the Liquid. Build the navigation as a section and expose a link_list setting so the merchant chooses which menu drives it. That is the difference between a header a developer has to edit and one a merchant can repoint in the theme editor. Read the chosen menu off section.settings, and fall back to the default handle if nothing is picked yet.

1{% assign menu = linklists[section.settings.menu] | default: linklists['main-menu'] %}2 3<nav class="mega-nav" aria-label="Primary">4  <ul class="mega-nav__row">5    {% for link in menu.links %}6      <li class="mega-nav__item">7        {% if link.links.size > 0 %}8          <details class="mega-nav__details">9            <summary10              class="mega-nav__top {% if link.active %}mega-nav__top--active{% endif %}"11            >12              {{ link.title }}13            </summary>14 15            <div class="mega-nav__panel">16              <div class="mega-nav__columns">17                {% for child in link.links %}18                  <div class="mega-nav__col">19                    <a20                      href="{{ child.url }}"21                      class="mega-nav__col-head {% if child.active %}mega-nav__col-head--active{% endif %}"22                    >23                      {{ child.title }}24                    </a>25 26                    {% if child.links.size > 0 %}27                      <ul class="mega-nav__sublist">28                        {% for grandchild in child.links %}29                          <li>30                            <a href="{{ grandchild.url }}" class="mega-nav__sublink">31                              {{ grandchild.title }}32                            </a>33                          </li>34                        {% endfor %}35                      </ul>36                    {% endif %}37                  </div>38                {% endfor %}39              </div>40            </div>41          </details>42        {% else %}43          <a44            href="{{ link.url }}"45            class="mega-nav__top {% if link.active %}mega-nav__top--active{% endif %}"46          >47            {{ link.title }}48          </a>49        {% endif %}50      </li>51    {% endfor %}52  </ul>53</nav>

• The menu assignment reads the merchant's picked menu and falls back to main-menu, so the section renders something the moment it is dropped on the page.
• The link.links.size > 0 guard is what splits triggers from flat links. An item with children renders a <details> panel; an item without children renders a plain <a>. Skip this guard and you get empty dropdowns on "Contact" and "Home".
• Each child link becomes a column heading, and any grandchildren (the deeper level Shopify allows) become the list under it. That two-level structure is the whole mega menu.
• link.active and child.active add a class on the current section so the nav reflects where the shopper is.

The schema: a link_list setting

The link_list setting type is the native way to let a merchant pick a menu. It renders a dropdown of every menu in the store and returns the chosen menu's handle, which is exactly what linklists[...] expects. Here is the minimum schema. The default maps to the handle of the menu the merchant most likely wants.

1{2  "name": "Mega menu",3  "settings": [4    {5      "type": "link_list",6      "id": "menu",7      "label": "Menu",8      "default": "main-menu",9      "info": "Edit items and columns under Online Store, Navigation."10    }11  ],12  "presets": [13    { "name": "Mega menu" }14  ]15}

Accessibility: do not skip this part

A mega menu is a keyboard and screen-reader minefield if you build it as a pile of divs with hover-only behaviour. The native <details> and <summary> elements give you a disclosure widget that already works with the keyboard, exposes its expanded state to assistive tech, and toggles on click without a line of JavaScript. That is why the markup above leads with them rather than a custom hover menu.

• Real links, real text. Every item is an <a> with the link's actual title and url, so it is announced and focusable. No div pretending to be a link.
• A labelled landmark. The wrapping <nav aria-label="Primary"> gives screen-reader users a named region to jump to.
• Hover is an enhancement, not the mechanism. If you add hover-to-open with CSS, keep the click and keyboard toggle from <details> working underneath it. Hover alone excludes keyboard and touch users.

What AI tools get wrong here

• Hardcoding the navigation. A generated mega menu often spells out "Men", "Women", "Sale" as literal Liquid or pulls from linklists['main-menu'] with the handle baked in. The moment the merchant renames the menu or wants a different one in the footer, it breaks. Use a link_list setting so the menu is data, not code.
• No link.links guard. Without the link.links.size > 0 check, flat items like "Home" and "Contact" render empty dropdown panels, and a single missing guard turns a clean nav into a row of broken triggers.
• Skipping accessibility. Hover-only div menus with no keyboard support, no focusable links, and no expanded-state semantics are common in AI output. They look fine on a mouse and fail an audit. The <details> element exists precisely so you do not have to hand-roll any of that.

If you want the broader picture of how sections and blocks compose a theme, the sections and blocks explainer walks through where a section like this fits. And if you are working on a recent build, the Spring 2026 edition for developers covers what changed in the platform around theme architecture.

Wrapping up

A mega menu is a loop over linklists, a guard on link.links.size, and a <details> panel that renders the children as columns. Drive it with a link_list setting so the merchant owns the structure, mark the current section with link.active, and lean on the native disclosure element for accessibility. That is a production-grade mega menu with no app, no recurring cost, and nothing third-party loading on every page.