Implementation Guide

Introduction

A mega menu is an expanded dropdown navigation that displays many options in a visually organized way. It's particularly useful for e-commerce stores with extensive product catalogs, as it improves navigation and enhances the user experience.

UIkit provides robust components like Navbar and Dropdown that make it relatively straightforward to implement a mega menu in your Shopify store.

Prerequisites

Before you begin, make sure you have:

Access to your Shopify store admin
Basic knowledge of HTML, CSS, and JavaScript
Familiarity with Shopify theme structure
A backup of your current theme (always make a copy before making changes)

Setting Up UIkit in Shopify

Step 1: Add UIkit Files to Your Theme

First, you need to add the UIkit CSS and JavaScript files to your Shopify theme:

Download UIkit from getuikit.com
Go to your Shopify admin > Online Store > Themes
Click "Actions" on your theme and select "Edit code"
In the Assets folder, click "Add a new asset"
Upload the following files:
- uikit.min.css
- uikit.min.js
- uikit-icons.min.js

Alternative: Use CDN

Instead of uploading files, you can use the UIkit CDN links:

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.26/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.16.26/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.16.26/dist/js/uikit-icons.min.js"></script>

Step 2: Include UIkit in Your Theme

Add the UIkit files to your theme by editing the theme.liquid file:

In the theme editor, locate and open theme.liquid
Add the following code in the <head> section, before the closing </head> tag:

{% if using_local_files %}
  {{ 'uikit.min.css' | asset_url | stylesheet_tag }}
  <script src="{{ 'uikit.min.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'uikit-icons.min.js' | asset_url }}" defer="defer"></script>
{% else %}
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.26/dist/css/uikit.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.26/dist/js/uikit.min.js" defer="defer"></script>
  <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.26/dist/js/uikit-icons.min.js" defer="defer"></script>
{% endif %}

This will load the UIkit framework on all pages of your Shopify store.

Creating the Mega Menu Structure

Step 1: Plan Your Mega Menu Structure

Before diving into code, plan your mega menu structure. For example:

Main Menu Items: Clothing, Accessories, Sale
Submenu Items: Nested categories like Men, Women, Kids under "Clothing"
Mega Menu Items: Featured categories with links and images

Step 2: Create a New Section for the Mega Menu

In the theme editor, go to the Sections folder
Click "Add a new section" and name it mega-menu.liquid
Add the following base code:

<div class="mega-menu-container">
  <nav class="uk-navbar-container" uk-navbar="boundary-align: true; align: center">
    <div class="uk-navbar-left">
      <ul class="uk-navbar-nav">
        {% for link in linklists[section.settings.menu].links %}
          <li class="{% if link.links.size > 0 %}has-dropdown{% endif %}">
            <a href="{{ link.url }}">{{ link.title }}</a>
            
            {% if link.links.size > 0 %}
              <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
                <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
                  {% for childlink in link.links %}
                    <div>
                      <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li class="uk-nav-header">{{ childlink.title }}</li>
                        {% if childlink.links.size > 0 %}
                          {% for grandchildlink in childlink.links %}
                            <li><a href="{{ grandchildlink.url }}">{{ grandchildlink.title }}</a></li>
                          {% endfor %}
                        {% endif %}
                      </ul>
                    </div>
                  {% endfor %}
                </div>
              </div>
            {% endif %}
          </li>
        {% endfor %}
      </ul>
    </div>
  </nav>
</div>

{% schema %}
{
  "name": "Mega Menu",
  "settings": [
    {
      "type": "link_list",
      "id": "menu",
      "label": "Menu",
      "default": "main-menu"
    }
  ],
  "presets": [
    {
      "name": "Mega Menu",
      "category": "Navigation"
    }
  ]
}
{% endschema %}

Step 3: Configure Your Navigation in Shopify

Go to Shopify admin > Online Store > Navigation
Create or edit your main menu structure
Create nested menus to match your planned mega menu structure

Step 4: Include the Mega Menu Section in Your Theme

Add the mega menu section to your theme by including it in your theme.liquid file or in a specific template:

{% section 'mega-menu' %}

Styling the Mega Menu

Step 1: Create a Custom CSS File

In the Assets folder, click "Add a new asset"
Create a new file named mega-menu-custom.css
Add the following base styles:

.mega-menu-container {
  position: relative;
  z-index: 100;
}

.uk-navbar-container {
  background-color: #ffffff;
}

.uk-navbar-dropdown {
  padding: 25px;
  background-color: #ffffff;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

.uk-nav-header {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 14px;
  color: #333;
}

.uk-navbar-dropdown-nav > li > a {
  color: #666;
  padding: 5px 0;
  font-size: 14px;
}

.uk-navbar-dropdown-nav > li > a:hover {
  color: #000;
  text-decoration: none;
}

Step 2: Include the Custom CSS in Your Theme

Add the custom CSS file to your theme by editing the theme.liquid file:

{{ 'mega-menu-custom.css' | asset_url | stylesheet_tag }}

Making the Mega Menu Responsive

UIkit is responsive by default, but you may want to add some custom behavior for mobile devices:

Step 1: Add Mobile Toggle

Update your mega-menu.liquid file to include a mobile toggle:

<div class="mega-menu-container">
  <nav class="uk-navbar-container" uk-navbar="boundary-align: true; align: center">
    <!-- Mobile Toggle Button -->
    <div class="uk-navbar-left uk-hidden@m">
      <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#mobile-menu" uk-toggle></a>
    </div>
    
    <!-- Desktop Menu -->
    <div class="uk-navbar-left uk-visible@m">
      <!-- Your existing menu code -->
    </div>
  </nav>
  
  <!-- Mobile Off-Canvas Menu -->
  <div id="mobile-menu" uk-offcanvas="mode: slide; overlay: true">
    <div class="uk-offcanvas-bar">
      <button class="uk-offcanvas-close" type="button" uk-close></button>
      <ul class="uk-nav uk-nav-default">
        {% for link in linklists[section.settings.menu].links %}
          <li class="{% if link.links.size > 0 %}uk-parent{% endif %}">
            <a href="{{ link.url }}">{{ link.title }}</a>
            
            {% if link.links.size > 0 %}
              <ul class="uk-nav-sub">
                {% for childlink in link.links %}
                  <li>
                    <a href="{{ childlink.url }}">{{ childlink.title }}</a>
                    {% if childlink.links.size > 0 %}
                      <ul>
                        {% for grandchildlink in childlink.links %}
                          <li><a href="{{ grandchildlink.url }}">{{ grandchildlink.title }}</a></li>
                        {% endfor %}
                      </ul>
                    {% endif %}
                  </li>
                {% endfor %}
              </ul>
            {% endif %}
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>
</div>

Step 2: Add Responsive Styles

Add responsive styles to your custom CSS file:

/* Mobile styles */
@media (max-width: 959px) {
  .uk-offcanvas-bar {
    background-color: #fff;
    color: #333;
  }
  
  .uk-offcanvas-bar .uk-nav-default > li > a {
    color: #333;
  }
  
  .uk-offcanvas-bar .uk-nav-default .uk-nav-sub a {
    color: #666;
  }
  
  .uk-offcanvas-bar .uk-nav-default > li.uk-active > a {
    color: #000;
  }
}

Customization Options

UIkit offers many customization options for your mega menu:

Dropdown Positioning

You can change the position of the dropdown by modifying the pos option in the uk-dropdown attribute:

<div class="uk-navbar-dropdown" uk-dropdown="pos: bottom-center; boundary: .uk-navbar-nav; boundary-align: true; offset: 10">

Options include: bottom-left, bottom-center, bottom-right, top-left, top-center, top-right, etc.

Animation

Add animation to your dropdowns:

<div class="uk-navbar-dropdown" uk-dropdown="animation: uk-animation-slide-top-small; duration: 300">

Width and Grid

Control the width and grid layout of your mega menu:

<div class="uk-navbar-dropdown uk-navbar-dropdown-width-4">
  <div class="uk-navbar-dropdown-grid uk-child-width-1-4" uk-grid>
    <!-- Content -->
  </div>
</div>

Troubleshooting

Common Issues and Solutions

Dropdown not appearing

Issue: Mega menu dropdown doesn't appear when hovering.

Solution:

Check if UIkit JavaScript is properly loaded
Verify the correct UIkit attributes are used
Check for CSS conflicts that might be hiding the dropdown
Ensure z-index values are appropriate

.uk-navbar-dropdown {
  z-index: 980;
}

Mobile menu not working

Issue: Off-canvas mobile menu doesn't open.

Solution:

Verify the off-canvas ID matches the toggle href
Check if UIkit JavaScript is loaded
Inspect for JavaScript errors in the console

Styling conflicts with theme

Issue: Mega menu styling conflicts with Shopify theme styles.

Solution:

Use more specific CSS selectors
Add !important to critical styles (use sparingly)
Override theme styles in a separate CSS file loaded after theme CSS

.mega-menu-container .uk-navbar-nav > li > a {
  color: #333 !important;
}

Table of Contents

Introduction

Prerequisites

Setting Up UIkit in Shopify

Step 1: Add UIkit Files to Your Theme

Alternative: Use CDN

Step 2: Include UIkit in Your Theme

Creating the Mega Menu Structure

Step 1: Plan Your Mega Menu Structure

Step 2: Create a New Section for the Mega Menu

Step 3: Configure Your Navigation in Shopify

Step 4: Include the Mega Menu Section in Your Theme

Styling the Mega Menu

Step 1: Create a Custom CSS File

Step 2: Include the Custom CSS in Your Theme

Making the Mega Menu Responsive

Step 1: Add Mobile Toggle

Step 2: Add Responsive Styles

Customization Options

Dropdown Positioning

Animation

Width and Grid

Troubleshooting

Common Issues and Solutions

Dropdown not appearing

Mobile menu not working

Styling conflicts with theme

Resources

UIkit Documentation

Shopify Documentation