Code Examples

Basic Mega Menu

This example shows a simple mega menu with a dropdown for each main navigation item.

HTML/Liquid Code

<nav class="uk-navbar-container" uk-navbar>
  <div class="uk-navbar-left">
    <ul class="uk-navbar-nav">
      {% for link in linklists[section.settings.menu].links %}
        <li>
          <a href="{{ link.url }}">{{ link.title }}</a>
          {% if link.links.size > 0 %}
            <div class="uk-navbar-dropdown">
              <ul class="uk-nav uk-navbar-dropdown-nav">
                {% for childlink in link.links %}
                  <li><a href="{{ childlink.url }}">{{ childlink.title }}</a></li>
                {% endfor %}
              </ul>
            </div>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </div>
</nav>

CSS

.uk-navbar-container {
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.uk-navbar-nav > li > a {
  min-height: 60px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  text-transform: none;
}

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

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

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

Multi-Column Mega Menu

This example creates a multi-column mega menu for categories with many subcategories.

HTML/Liquid Code

<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>
          <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>
                {% assign columns = link.links.size | divided_by: 5 | ceil %}
                {% assign links_per_column = link.links.size | divided_by: columns | ceil %}
                
                {% for i in (1..columns) %}
                  <div>
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                      {% assign start_index = forloop.index0 | times: links_per_column %}
                      {% assign end_index = start_index | plus: links_per_column | minus: 1 %}
                      
                      {% for j in (start_index..end_index) %}
                        {% if link.links[j] %}
                          <li><a href="{{ link.links[j].url }}">{{ link.links[j].title }}</a></li>
                        {% endif %}
                      {% endfor %}
                    </ul>
                  </div>
                {% endfor %}
              </div>
            </div>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </div>
</nav>

CSS

.uk-navbar-dropdown-width-3 {
  width: 660px;
}

.uk-navbar-dropdown-grid {
  margin-left: -20px;
}

.uk-navbar-dropdown-grid > * {
  padding-left: 20px;
}

.uk-navbar-dropdown-nav > li > a {
  padding: 4px 0;
  font-size: 14px;
}

Mega Menu with Images

This example adds images to the mega menu for a more visual navigation experience.

HTML/Liquid Code

<nav class="uk-navbar-container" uk-navbar>
  <div class="uk-navbar-left">
    <ul class="uk-navbar-nav">
      {% for link in linklists[section.settings.menu].links %}
        <li>
          <a href="{{ link.url }}">{{ link.title }}</a>
          {% if link.links.size > 0 %}
            <div class="uk-navbar-dropdown uk-navbar-dropdown-width-4">
              <div class="uk-navbar-dropdown-grid uk-child-width-1-4" uk-grid>
                <div>
                  <ul class="uk-nav uk-navbar-dropdown-nav">
                    <li class="uk-nav-header">{{ link.title }} Categories</li>
                    {% for childlink in link.links limit: 6 %}
                      <li><a href="{{ childlink.url }}">{{ childlink.title }}</a></li>
                    {% endfor %}
                  </ul>
                </div>
                
                <div>
                  <ul class="uk-nav uk-navbar-dropdown-nav">
                    <li class="uk-nav-header">Featured</li>
                    {% for childlink in link.links offset: 6 limit: 6 %}
                      <li><a href="{{ childlink.url }}">{{ childlink.title }}</a></li>
                    {% endfor %}
                  </ul>
                </div>
                
                <div class="uk-width-1-2">
                  <div class="uk-panel">
                    <img src="{{ section.settings[link.title | handleize | append: '_image'] | img_url: '600x' }}" alt="{{ link.title }}">
                    <div class="uk-position-bottom-left uk-panel uk-overlay uk-overlay-primary">
                      <h3 class="uk-margin-remove">{{ section.settings[link.title | handleize | append: '_title'] }}</h3>
                      <p class="uk-margin-remove">{{ section.settings[link.title | handleize | append: '_text'] }}</p>
                      <a href="{{ section.settings[link.title | handleize | append: '_link'] }}" class="uk-button uk-button-text">Shop Now</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </div>
</nav>

Schema for Images

{% schema %}
{
  "name": "Mega Menu with Images",
  "settings": [
    {
      "type": "link_list",
      "id": "menu",
      "label": "Menu",
      "default": "main-menu"
    },
    {
      "type": "header",
      "content": "Category Images"
    },
    {
      "type": "image_picker",
      "id": "clothing_image",
      "label": "Clothing Category Image"
    },
    {
      "type": "text",
      "id": "clothing_title",
      "label": "Clothing Image Title",
      "default": "New Collection"
    },
    {
      "type": "text",
      "id": "clothing_text",
      "label": "Clothing Image Text",
      "default": "Discover our latest styles"
    },
    {
      "type": "url",
      "id": "clothing_link",
      "label": "Clothing Image Link"
    }
  ]
}
{% endschema %}

CSS

.uk-navbar-dropdown-width-4 {
  width: 880px;
}

.uk-panel {
  position: relative;
  overflow: hidden;
}

.uk-panel img {
  width: 100%;
  height: auto;
  display: block;
}

.uk-overlay-primary {
  padding: 20px;
  background-color: rgba(34, 34, 34, 0.8);
  color: #fff;
}

.uk-overlay-primary h3 {
  font-size: 18px;
  color: #fff;
}

.uk-overlay-primary p {
  font-size: 14px;
  margin-top: 5px;
}

.uk-button-text {
  color: #fff;
  text-decoration: underline;
}

Full-Width Mega Menu

This example creates a full-width mega menu that spans the entire viewport.

HTML/Liquid Code

<nav class="uk-navbar-container" uk-navbar="dropbar: true; dropbar-mode: push">
  <div class="uk-navbar-left">
    <ul class="uk-navbar-nav">
      {% for link in linklists[section.settings.menu].links %}
        <li>
          <a href="{{ link.url }}">{{ link.title }}</a>
          {% if link.links.size > 0 %}
            <div class="uk-navbar-dropdown" uk-dropdown="boundary: !.uk-navbar-container; boundary-align: true; pos: bottom-justify; stretch: x">
              <div class="uk-container uk-container-large">
                <div uk-grid>
                  <div class="uk-width-1-4">
                    <h3>{{ link.title }}</h3>
                    <p>Explore our {{ link.title | downcase }} collection featuring the latest trends and timeless classics.</p>
                    <a href="{{ link.url }}" class="uk-button uk-button-primary">View All {{ link.title }}</a>
                  </div>
                  <div class="uk-width-3-4">
                    <div class="uk-child-width-1-3@m" uk-grid>
                      {% for childlink in link.links %}
                        <div>
                          <h4>{{ childlink.title }}</h4>
                          {% if childlink.links.size > 0 %}
                            <ul class="uk-nav uk-nav-default">
                              {% for grandchildlink in childlink.links %}
                                <li><a href="{{ grandchildlink.url }}">{{ grandchildlink.title }}</a></li>
                              {% endfor %}
                            </ul>
                          {% endif %}
                        </div>
                      {% endfor %}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </div>
</nav>

CSS

.uk-navbar-container {
  position: relative;
  z-index: 980;
}

.uk-navbar-dropbar {
  background-color: #fff;
  box-shadow: 0 5px 12px rgba(0,0,0,0.15);
}

.uk-navbar-dropdown {
  padding: 40px 0;
}

.uk-navbar-dropdown h3 {
  margin-top: 0;
  font-size: 24px;
  color: #333;
}

.uk-navbar-dropdown h4 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

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

.uk-nav-default > li > a:hover {
  color: #000;
}

.uk-button-primary {
  background-color: #1e87f0;
  color: #fff;
  border-radius: 3px;
  padding: 0 20px;
  line-height: 38px;
  font-size: 14px;
}

Mega Menu with Featured Products

This example shows how to include featured products in your mega menu.

HTML/Liquid Code

<nav class="uk-navbar-container" uk-navbar>
  <div class="uk-navbar-left">
    <ul class="uk-navbar-nav">
      {% for link in linklists[section.settings.menu].links %}
        <li>
          <a href="{{ link.url }}">{{ link.title }}</a>
          {% if link.links.size > 0 %}
            <div class="uk-navbar-dropdown uk-navbar-dropdown-width-4">
              <div class="uk-navbar-dropdown-grid uk-child-width-1-4" uk-grid>
                <div class="uk-width-1-2">
                  <div class="uk-child-width-1-2" uk-grid>
                    {% for childlink in link.links %}
                      {% if forloop.index <= 2 %}
                        <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>
                      {% endif %}
                    {% endfor %}
                  </div>
                </div>
                
                <div class="uk-width-1-2">
                  <h4>Featured Products</h4>
                  <div class="uk-child-width-1-2" uk-grid>
                    {% assign collection_handle = link.title | handleize %}
                    {% if collections[collection_handle].products.size > 0 %}
                      {% for product in collections[collection_handle].products limit: 2 %}
                        <div>
                          <div class="uk-card uk-card-small">
                            <div class="uk-card-media-top">
                              <a href="{{ product.url }}">
                                <img src="{{ product.featured_image | img_url: '300x300', crop: 'center' }}" alt="{{ product.title }}">
                              </a>
                            </div>
                            <div class="uk-card-body uk-padding-small">
                              <h5 class="uk-margin-remove-bottom">
                                <a href="{{ product.url }}">{{ product.title }}</a>
                              </h5>
                              <p class="uk-margin-remove-top uk-text-bold">{{ product.price | money }}</p>
                            </div>
                          </div>
                        </div>
                      {% endfor %}
                    {% else %}
                      <p>No products found in this collection.</p>
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </div>
</nav>

CSS

.uk-card-small {
  border: 1px solid #f0f0f0;
  transition: box-shadow 0.3s ease;
}

.uk-card-small:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.uk-card-body {
  padding: 15px;
}

.uk-card-body h5 {
  font-size: 14px;
  font-weight: normal;
}

.uk-card-body h5 a {
  color: #333;
  text-decoration: none;
}

.uk-card-body p {
  font-size: 14px;
  color: #666;
}

.uk-text-bold {
  font-weight: bold;
}

Responsive Mobile Menu

This example shows how to create a responsive mobile menu that transforms into a mega menu on larger screens.

HTML/Liquid Code

<!-- Mobile Toggle Button -->
<div class="uk-hidden@m uk-navbar-container">
  <nav class="uk-container" uk-navbar>
    <div class="uk-navbar-left">
      <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#mobile-menu" uk-toggle></a>
    </div>
    <div class="uk-navbar-center">
      <a href="/" class="uk-navbar-item uk-logo">
        <img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" width="120">
      </a>
    </div>
    <div class="uk-navbar-right">
      <a href="/cart" class="uk-navbar-item">
        <span uk-icon="icon: cart"></span>
        <span class="uk-badge">{{ cart.item_count }}</span>
      </a>
    </div>
  </nav>
</div>

<!-- 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>

<!-- Desktop Mega Menu -->
<div class="uk-visible@m uk-navbar-container">
  <nav class="uk-container" uk-navbar="boundary-align: true; align: center">
    <div class="uk-navbar-left">
      <a href="/" class="uk-navbar-item uk-logo">
        <img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" width="150">
      </a>
    </div>
    
    <div class="uk-navbar-center">
      <ul class="uk-navbar-nav">
        {% for link in linklists[section.settings.menu].links %}
          <li>
            <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>
    
    <div class="uk-navbar-right">
      <ul class="uk-navbar-nav">
        <li>
          <a href="/search" uk-icon="icon: search"></a>
        </li>
        <li>
          <a href="/account" uk-icon="icon: user"></a>
        </li>
        <li>
          <a href="/cart" uk-icon="icon: cart"></a>
          <span class="uk-badge uk-position-top-right">{{ cart.item_count }}</span>
        </li>
      </ul>
    </div>
  </nav>
</div>

CSS

/* Mobile Menu Styles */
.uk-offcanvas-bar {
  background-color: #fff;
  color: #333;
  width: 280px;
}

.uk-offcanvas-bar .uk-nav-default > li > a {
  color: #333;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.uk-offcanvas-bar .uk-nav-default .uk-nav-sub a {
  color: #666;
  padding: 8px 0;
}

.uk-offcanvas-bar .uk-nav-default > li.uk-active > a {
  color: #000;
  font-weight: bold;
}

.uk-offcanvas-bar .uk-nav-sub {
  padding: 5px 0 5px 15px;
}

.uk-offcanvas-close {
  color: #333;
}

/* Desktop Menu Styles */
.uk-navbar-container {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.uk-navbar-nav > li > a {
  min-height: 80px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  text-transform: none;
}

.uk-badge {
  background-color: #f0506e;
  font-size: 10px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
}

.uk-position-top-right {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

Custom JavaScript Enhancements

Add these JavaScript enhancements to improve the user experience of your mega menu.

Hover Delay

This script adds a delay before the mega menu appears or disappears, preventing accidental triggering.

// Create a new file in Assets folder: mega-menu-enhancements.js
document.addEventListener('DOMContentLoaded', function() {
  // Add hover delay to mega menu
  const navItems = document.querySelectorAll('.uk-navbar-nav > li');
  let hoverTimeout;
  
  navItems.forEach(item => {
    item.addEventListener('mouseenter', function() {
      clearTimeout(hoverTimeout);
      
      // Hide all other dropdowns
      navItems.forEach(otherItem => {
        if (otherItem !== item && otherItem.classList.contains('uk-open')) {
          UIkit.dropdown(otherItem.querySelector('.uk-navbar-dropdown')).hide(0);
        }
      });
      
      // Show this dropdown after a short delay
      const dropdown = item.querySelector('.uk-navbar-dropdown');
      if (dropdown) {
        hoverTimeout = setTimeout(() => {
          UIkit.dropdown(dropdown).show();
        }, 200);
      }
    });
    
    item.addEventListener('mouseleave', function() {
      clearTimeout(hoverTimeout);
      
      const dropdown = item.querySelector('.uk-navbar-dropdown');
      if (dropdown) {
        hoverTimeout = setTimeout(() => {
          UIkit.dropdown(dropdown).hide();
        }, 300);
      }
    });
  });
});

Sticky Header

This script makes the mega menu sticky when scrolling down the page.

// Add to mega-menu-enhancements.js
document.addEventListener('DOMContentLoaded', function() {
  // Make header sticky with animation
  const header = document.querySelector('.uk-navbar-container');
  
  if (header) {
    let lastScrollTop = 0;
    let headerHeight = header.offsetHeight;
    
    window.addEventListener('scroll', function() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      
      if (scrollTop > headerHeight) {
        if (scrollTop > lastScrollTop) {
          // Scrolling down
          header.style.transform = 'translateY(-100%)';
        } else {
          // Scrolling up
          header.classList.add('uk-sticky');
          header.style.transform = 'translateY(0)';
        }
      } else {
        // At the top
        header.classList.remove('uk-sticky');
        header.style.transform = 'translateY(0)';
      }
      
      lastScrollTop = scrollTop;
    });
  }
});

Add this CSS for the sticky header:

.uk-sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 990;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease-in-out;
}

Include the JavaScript file in your theme:

{{ 'mega-menu-enhancements.js' | asset_url | script_tag }}

Examples

Basic Mega Menu

HTML/Liquid Code

CSS

Multi-Column Mega Menu

HTML/Liquid Code

CSS

Mega Menu with Images

New Collection

HTML/Liquid Code

Schema for Images

CSS

Full-Width Mega Menu

Men

Women

Kids

HTML/Liquid Code

CSS

Mega Menu with Featured Products

Classic White T-Shirt

Slim Fit Jeans

HTML/Liquid Code

CSS

Responsive Mobile Menu

HTML/Liquid Code

CSS

Custom JavaScript Enhancements

Hover Delay

Sticky Header