component-nav-megamenu Snippet

snippets/component-nav-megamenu.liquid renders a full-width megamenu navigation layout for desktop headers. When a menu item with children is clicked, it expands a wide dropdown panel below the header using a 6-column grid layout. The megamenu supports 3 levels of navigation (parent → child → grandchild) and uses Alpine.js for toggle behavior and smooth transitions.

What It Does

Renders a full-width megamenu that expands below the header.
Uses a 6-column grid layout to display child links in organized columns.
Supports 3 levels of navigation hierarchy (parent → child → grandchild).
Provides toggleable megamenu panels using Alpine.js state management.
Uses smooth transitions for megamenu show/hide animations.
Marks current page links with aria-current="page".
Handles click-outside detection to close open megamenus.

Parameters

Parameter	Type	Default	Description
`menu`	linklist	required	Menu object (linklist) to render.
`menu_color_scheme`	string	optional	Color scheme handle for megamenu background styling.

Dependencies & Assets

Type	Files / Components
CSS	Inline `{% stylesheet %}` block with comprehensive megamenu styling
JavaScript	Alpine.js (required for megamenu state management)
Icons	`icon-caret.svg` (inline via `inline_asset_content`)
Data	Requires `menu` linklist object with `links` array

Alpine.js powers megamenu state (x-data, x-show, @click.outside).
Inline styles provide all megamenu-specific CSS (no external CSS file required).
Grid layout uses CSS Grid with 6 columns for organized child link display.

Dynamic Styles

The snippet includes inline styles for megamenu positioning, grid layout, and typography:

liquid

{% stylesheet %}
  #main-header .nav-megamenu {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    margin-top: 1px;
  }
  #main-header .nav-megamenu .page-width {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-inline: auto;
    align-items: flex-start;
    padding: 30px 20px;
  }
  /* ... additional styling ... */
{% endstylesheet %}

Full-width positioning: Megamenu spans entire header width with width: 100% and left: 0.
Grid layout: Uses 6-column grid (grid-template-columns: repeat(6, minmax(0, 1fr))) for organized child links.
Absolute positioning: Positioned absolutely below header with top: 100%.
Page width container: Inner content uses .page-width class for centered, constrained width.

Markup Structure

liquid

<ul>
  {% for link in menu.links %}
    <li x-data="{ menuOpen: false }" @click.outside="menuOpen = false">
      {% if link.links != blank %}
        <!-- Parent link with megamenu -->
      {% else %}
        <!-- Simple link without megamenu -->
      {% endif %}
    </li>
  {% endfor %}
</ul>

Alpine.js state: Each top-level menu item has independent state for megamenu visibility.
Click outside: Closes megamenu when clicking outside via @click.outside.

liquid

{% if link.links != blank %}
  <button
    @click="menuOpen = !menuOpen"
    :class="{ 'menu-open': menuOpen }"
    class="menu-toggle"
  >
    {{- link.title | escape -}}
    {{- 'icon-caret.svg' | inline_asset_content -}}
  </button>
  <div
    x-show="menuOpen"
    x-transition
    x-cloak
    class="nav-megamenu color-{{ menu_color_scheme }} gradient"
  >
    <!-- Grid layout with child links -->
  </div>
{% endif %}

Toggle behavior: Clicking button toggles megamenu visibility.
Caret icon: Shows caret icon to indicate expandable menu.
Alpine.js directives:
- @click="menuOpen = !menuOpen": Toggles megamenu
- :class="{ 'menu-open': menuOpen }": Adds class when open
- x-show="menuOpen": Shows/hides megamenu
- x-transition: Smooth show/hide animation
- x-cloak: Prevents flash of unstyled content

liquid

<div class="nav-megamenu color-{{ menu_color_scheme }} gradient">
  <ul class="page-width" role="list">
    {%- for childlink in link.links -%}
      <li>
        <a href="{{ childlink.url }}" class="nav-megamenu_heading" {% if childlink.current %}aria-current="page"{% endif %}>
          {{ childlink.title | escape }}
        </a>
        {%- if childlink.links != blank -%}
          <ul class="nav-megamenu_child" role="list">
            {%- for grandchildlink in childlink.links -%}
              <li>
                <a href="{{ grandchildlink.url }}" {% if grandchildlink.current %}aria-current="page"{% endif %}>
                  {{ grandchildlink.title | escape }}
                </a>
              </li>
            {%- endfor -%}
          </ul>
        {%- endif -%}
      </li>
    {%- endfor -%}
  </ul>
</div>

6-column grid: Child links displayed in 6-column grid layout.
Child headings: Child links styled as headings (nav-megamenu_heading) with bold font weight.
Grandchild links: Nested grandchild links displayed below child headings.
Current page indication: Links to current page marked with aria-current="page".

liquid

{% else %}
  <a
    href="{{ link.url }}"
    {% if link.current %}
      aria-current="page"
    {% endif %}
  >
    {{- link.title | escape -}}
  </a>
{% endif %}

Direct link: Simple link without megamenu when parent has no children.

Behavior

Megamenu toggle: Clicking parent link with children opens/closes its megamenu.
Click outside: Clicking outside closes open megamenu.
Smooth transitions: Alpine.js x-transition provides smooth show/hide animations.
Current page indication: Links to current page marked with aria-current="page".
Full-width display: Megamenu spans entire header width for maximum content space.
Grid organization: Child links organized in 6-column grid for easy scanning.

Usage Example

liquid

{% render 'component-nav-megamenu',
  menu: section.settings.menu,
  menu_color_scheme: section.settings.menu_color_scheme
%}

Typically used in:

Header (sections/header.liquid) when menu_type_desktop == 'mega' or not 'dropdown'/'drawer'
Desktop navigation (not used on mobile - mobile uses drawer)

What It Does

Parameters

Dependencies & Assets

Dynamic Styles

Markup Structure

Parent Link with Megamenu

Megamenu Grid Layout

Simple Link (No Megamenu)

Behavior

Usage Example

Implementation Notes

component-nav-megamenu Snippet ​

What It Does ​

Parameters ​

Dependencies & Assets ​

Dynamic Styles ​

Markup Structure ​

Parent Link with Megamenu ​

Megamenu Grid Layout ​

Simple Link (No Megamenu) ​

Behavior ​

Usage Example ​

Implementation Notes ​

component-nav-megamenu Snippet

What It Does

Parameters

Dependencies & Assets

Dynamic Styles

Markup Structure

Parent Link with Megamenu

Megamenu Grid Layout

Simple Link (No Megamenu)

Behavior

Usage Example

Implementation Notes