Customization Guide

UIkit Customization Options

UIkit offers extensive customization options that allow you to tailor your mega menu to match your brand's look and feel. Here are the key areas you can customize:

Navbar Component Options

The UIkit Navbar component has several options that can be configured through HTML attributes:

<nav class="uk-navbar-container" uk-navbar="align: center; boundary-align: true; dropbar: true; dropbar-mode: push">

Option	Value	Description
`align`	left, center, right	Dropdown alignment
`boundary`	CSS selector	Referenced element to keep dropdowns within
`boundary-align`	Boolean	Align dropdown to boundary
`dropbar`	Boolean	Enable/disable dropbar behavior
`dropbar-mode`	slide, push	Dropbar animation mode
`duration`	Number	Animation duration in milliseconds
`offset`	Number	Offset of the dropdown

Dropdown Component Options

The UIkit Dropdown component also has several options for customization:

<div class="uk-navbar-dropdown" uk-dropdown="mode: click; pos: bottom-justify; boundary: !.uk-navbar-container; boundary-align: true; stretch: x; animation: uk-animation-slide-top-small; duration: 300">

Option	Value	Description
`mode`	click, hover	Trigger behavior
`pos`	bottom-left, bottom-center, bottom-right, etc.	Position of the dropdown
`stretch`	x, y	Stretch dropdown width or height
`animation`	uk-animation-*	Animation class
`duration`	Number	Animation duration in milliseconds
`delay-show`	Number	Delay time in milliseconds before a dropdown is shown
`delay-hide`	Number	Delay time in milliseconds before a dropdown is hidden

Customizing Colors and Typography

You can customize the colors and typography of your mega menu by adding custom CSS to your theme:

/* Custom colors */
.uk-navbar-container {
  background-color: #your-brand-color;
}

.uk-navbar-nav > li > a {
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Your Brand Font', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
}

.uk-navbar-nav > li:hover > a,
.uk-navbar-nav > li > a:focus,
.uk-navbar-nav > li.uk-open > a {
  color: #fff;
}

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

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

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

.uk-nav-header {
  color: #your-brand-color;
  font-weight: bold;
  text-transform: uppercase;
}

Creating a Custom Theme

For more extensive customization, you can create a custom UIkit theme by modifying the SCSS variables:

Install Node.js and npm if you haven't already
Clone the UIkit repository: git clone https://github.com/uikit/uikit.git
Navigate to the UIkit directory: cd uikit
Install dependencies: npm install
Create a custom theme in the custom directory
Modify the SCSS variables in your custom theme
Build your custom theme: npm run build

Here are some key SCSS variables you might want to customize:

// Colors
$global-primary-background: #your-brand-color;
$global-secondary-background: #your-secondary-color;

// Typography
$global-font-family: 'Your Brand Font', sans-serif;
$global-font-size: 16px;
$global-line-height: 1.5;

// Navbar
$navbar-background: #your-navbar-color;
$navbar-nav-item-height: 80px;
$navbar-nav-item-padding-horizontal: 15px;
$navbar-nav-item-color: rgba(255, 255, 255, 0.8);
$navbar-nav-item-hover-color: #fff;
$navbar-nav-item-active-color: #fff;

// Dropdown
$dropdown-padding: 25px;
$dropdown-background: #fff;
$dropdown-color: #666;
$dropdown-nav-item-color: #666;
$dropdown-nav-item-hover-color: #your-brand-color;
$dropdown-nav-header-color: #your-brand-color;

Shopify-Specific Customizations

When integrating your UIkit mega menu with Shopify, there are several Shopify-specific customizations you can make:

Theme Settings

Add customization options to your theme settings to allow store owners to customize the mega menu without editing code:

{% schema %}
{
  "name": "Mega Menu",
  "settings": [
    {
      "type": "header",
      "content": "Menu Settings"
    },
    {
      "type": "link_list",
      "id": "menu",
      "label": "Menu",
      "default": "main-menu"
    },
    {
      "type": "header",
      "content": "Style Settings"
    },
    {
      "type": "color",
      "id": "menu_bg_color",
      "label": "Menu Background Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "menu_text_color",
      "label": "Menu Text Color",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "dropdown_bg_color",
      "label": "Dropdown Background Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "dropdown_text_color",
      "label": "Dropdown Text Color",
      "default": "#666666"
    },
    {
      "type": "select",
      "id": "dropdown_position",
      "label": "Dropdown Position",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center"
    },
    {
      "type": "checkbox",
      "id": "enable_sticky",
      "label": "Enable Sticky Menu",
      "default": true
    }
  ]
}
{% endschema %}

Then use these settings in your mega menu code:

<nav class="uk-navbar-container" 
     style="background-color: {{ section.settings.menu_bg_color }};" 
     uk-navbar="align: {{ section.settings.dropdown_position }}; boundary-align: true">
  <div class="uk-navbar-left">
    <ul class="uk-navbar-nav">
      {% for link in linklists[section.settings.menu].links %}
        <li>
          <a href="{{ link.url }}" style="color: {{ section.settings.menu_text_color }};">{{ link.title }}</a>
          {% if link.links.size > 0 %}
            <div class="uk-navbar-dropdown" style="background-color: {{ section.settings.dropdown_bg_color }};">
              <ul class="uk-nav uk-navbar-dropdown-nav">
                {% for childlink in link.links %}
                  <li><a href="{{ childlink.url }}" style="color: {{ section.settings.dropdown_text_color }};">{{ childlink.title }}</a></li>
                {% endfor %}
              </ul>
            </div>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </div>
</nav>

{% if section.settings.enable_sticky %}
  <script>
    UIkit.sticky('.uk-navbar-container');
  </script>
{% endif %}

Dynamic Content

Leverage Shopify's dynamic content capabilities to populate your mega menu with dynamic data:

<!-- Featured Products in Mega Menu -->
<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>

Shopify Section Blocks

Use Shopify section blocks to allow store owners to add custom content to the mega menu:

{% schema %}
{
  "name": "Mega Menu",
  "settings": [
    {
      "type": "link_list",
      "id": "menu",
      "label": "Menu",
      "default": "main-menu"
    }
  ],
  "blocks": [
    {
      "type": "featured_collection",
      "name": "Featured Collection",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "Collection"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Featured Collection"
        },
        {
          "type": "select",
          "id": "menu_item",
          "label": "Menu Item",
          "info": "Add this block to a specific menu item",
          "options": [
            { "value": "clothing", "label": "Clothing" },
            { "value": "accessories", "label": "Accessories" },
            { "value": "sale", "label": "Sale" }
          ]
        }
      ]
    },
    {
      "type": "image",
      "name": "Promotional Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title"
        },
        {
          "type": "select",
          "id": "menu_item",
          "label": "Menu Item",
          "options": [
            { "value": "clothing", "label": "Clothing" },
            { "value": "accessories", "label": "Accessories" },
            { "value": "sale", "label": "Sale" }
          ]
        }
      ]
    }
  ]
}
{% endschema %}

Then use these blocks in your mega menu:

{% 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>
          <!-- Regular menu items -->
          <div class="uk-width-1-2">
            <div class="uk-child-width-1-2" 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>
          
          <!-- Dynamic blocks -->
          <div class="uk-width-1-2">
            {% assign link_handle = link.title | handleize %}
            {% for block in section.blocks %}
              {% if block.settings.menu_item == link_handle %}
                {% case block.type %}
                  {% when 'featured_collection' %}
                    <h4>{{ block.settings.title }}</h4>
                    <div class="uk-child-width-1-2" uk-grid>
                      {% for product in collections[block.settings.collection].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 %}
                    </div>
                  {% when 'image' %}
                    <div class="uk-panel">
                      <img src="{{ block.settings.image | img_url: '600x' }}" alt="{{ block.settings.title }}">
                      <div class="uk-position-bottom-left uk-panel uk-overlay uk-overlay-primary">
                        <h3 class="uk-margin-remove">{{ block.settings.title }}</h3>
                        <a href="{{ block.settings.link }}" class="uk-button uk-button-text">Shop Now</a>
                      </div>
                    </div>
                {% endcase %}
              {% endif %}
            {% endfor %}
          </div>
        </div>
      </div>
    {% endif %}
  </li>
{% endfor %}

Responsive Design Strategies

Creating a responsive mega menu is essential for providing a good user experience across all devices. Here are some strategies to ensure your mega menu works well on all screen sizes:

Breakpoints

UIkit uses the following breakpoints by default:

Breakpoint	Class	Width
Small	`@s`	640px
Medium	`@m`	960px
Large	`@l`	1200px
Extra Large	`@xl`	1600px

Use these breakpoints to create a responsive mega menu:

<!-- Mobile Toggle Button (visible on small screens) -->
<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>
  </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>
    <!-- Mobile menu content -->
  </div>
</div>

<!-- Desktop Mega Menu (visible on medium and larger screens) -->
<div class="uk-visible@m uk-navbar-container">
  <nav class="uk-container" uk-navbar="boundary-align: true; align: center">
    <!-- Desktop menu content -->
  </nav>
</div>

Grid System

Use UIkit's grid system to create responsive layouts within your mega menu:

<div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l" uk-grid>
  <!-- Content -->
</div>

This creates a grid that adapts to different screen sizes:

1 column on extra small screens
2 columns on small screens (640px and up)
3 columns on medium screens (960px and up)
4 columns on large screens (1200px and up)

Responsive Visibility

Use UIkit's visibility classes to show or hide elements based on screen size:

<!-- Only visible on small screens -->
<div class="uk-visible@s uk-hidden@m">
  <!-- Content for small screens only -->
</div>

<!-- Only visible on medium screens and up -->
<div class="uk-visible@m">
  <!-- Content for medium screens and up -->
</div>

<!-- Only visible on large screens and up -->
<div class="uk-visible@l">
  <!-- Content for large screens and up -->
</div>

Mobile-First Approach

Taking a mobile-first approach to your mega menu design ensures a good experience for all users, regardless of their device:

Off-Canvas Menu for Mobile

For mobile devices, replace the mega menu with an off-canvas menu:

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

Accordion for Mobile Navigation

Use UIkit's accordion component to create expandable sections in your mobile menu:

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

Touch-Friendly Design

Ensure your mobile menu is touch-friendly by:

Using larger touch targets (at least 44x44 pixels)
Adding sufficient spacing between menu items
Using click events instead of hover events on touch devices

/* Touch-friendly styles */
@media (max-width: 959px) {
  .uk-nav-default > li > a {
    padding: 12px 0;
    font-size: 16px;
  }
  
  .uk-nav-sub > li > a {
    padding: 10px 0;
    font-size: 14px;
  }
  
  .uk-offcanvas-bar .uk-nav-default > li > a {
    min-height: 44px;
    line-height: 44px;
  }
}

Performance Optimization

Optimizing the performance of your mega menu is crucial for providing a good user experience:

Lazy Loading Images

Use lazy loading for images in your mega menu to improve load times:

<img data-src="{{ product.featured_image | img_url: '300x300', crop: 'center' }}" alt="{{ product.title }}" uk-img>

Minify CSS and JavaScript

Use minified versions of UIkit's CSS and JavaScript files:

<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"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.16.26/dist/js/uikit-icons.min.js"></script>

Reduce DOM Size

Limit the number of elements in your mega menu to reduce DOM size and improve performance:

Limit the number of menu items
Limit the depth of nested menus
Use pagination for large collections of items

Optimize Animations

Use hardware-accelerated CSS properties for animations:

/* Use transform and opacity for animations */
.uk-navbar-dropdown {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Use will-change to hint at upcoming animations */
.uk-navbar-nav > li:hover > .uk-navbar-dropdown {
  will-change: transform, opacity;
}

Accessibility Considerations

Making your mega menu accessible to all users is essential:

Keyboard Navigation

Ensure your mega menu is navigable using the keyboard:

// Add keyboard navigation to mega menu
document.addEventListener('DOMContentLoaded', function() {
  const navItems = document.querySelectorAll('.uk-navbar-nav > li');
  
  navItems.forEach(item => {
    const link = item.querySelector('a');
    const dropdown = item.querySelector('.uk-navbar-dropdown');
    
    if (link && dropdown) {
      link.addEventListener('keydown', function(e) {
        // Open dropdown on Enter or Space
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          UIkit.dropdown(dropdown).show();
        }
      });
      
      // Add tabindex to all links in dropdown
      const dropdownLinks = dropdown.querySelectorAll('a');
      dropdownLinks.forEach(link => {
        link.setAttribute('tabindex', '0');
      });
    }
  });
});

ARIA Attributes

Add ARIA attributes to improve accessibility:

<nav class="uk-navbar-container" uk-navbar role="navigation" aria-label="Main navigation">
  <div class="uk-navbar-left">
    <ul class="uk-navbar-nav">
      {% for link in linklists[section.settings.menu].links %}
        <li>
          <a href="{{ link.url }}" {% if link.links.size > 0 %}aria-haspopup="true" aria-expanded="false"{% endif %}>{{ link.title }}</a>
          {% if link.links.size > 0 %}
            <div class="uk-navbar-dropdown" aria-hidden="true">
              <ul class="uk-nav uk-navbar-dropdown-nav" role="menu">
                {% for childlink in link.links %}
                  <li role="menuitem"><a href="{{ childlink.url }}">{{ childlink.title }}</a></li>
                {% endfor %}
              </ul>
            </div>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </div>
</nav>

Focus Styles

Ensure focus styles are visible for keyboard navigation:

/* Focus styles */
.uk-navbar-nav > li > a:focus {
  outline: 2px solid #1e87f0;
  outline-offset: -2px;
}

.uk-navbar-dropdown-nav > li > a:focus {
  outline: 2px solid #1e87f0;
  outline-offset: -2px;
}

Screen Reader Text

Add screen reader text to improve accessibility:

<a href="#" class="uk-navbar-toggle" uk-navbar-toggle-icon uk-toggle="target: #mobile-menu" aria-label="Open menu">
  <span class="uk-sr-only">Open menu</span>
</a>

Testing and Troubleshooting

Thoroughly testing your mega menu is essential to ensure it works correctly across all devices and browsers:

Cross-Browser Testing

Test your mega menu in different browsers:

Chrome
Firefox
Safari
Edge

Device Testing

Test your mega menu on different devices:

Desktop computers
Laptops
Tablets
Mobile phones

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

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

Dropdown positioning issues

Issue: Dropdown appears in the wrong position or gets cut off.

Solution:

Adjust the pos option in the uk-dropdown attribute
Use boundary and boundary-align options to control positioning
Check for CSS conflicts that might affect positioning

Performance issues

Issue: Mega menu is slow to load or causes page lag.

Solution:

Optimize images using lazy loading
Reduce the number of elements in the mega menu
Minify CSS and JavaScript
Use hardware-accelerated CSS properties for animations

Debugging Tools

Use these tools to debug issues with your mega menu:

Browser Developer Tools (F12 or Right-click > Inspect)
Shopify Theme Inspector for Chrome
Responsive Design Mode in browser developer tools
Lighthouse for performance testing

Table of Contents

UIkit Customization Options

Navbar Component Options

Dropdown Component Options

Customizing Colors and Typography

Creating a Custom Theme

Shopify-Specific Customizations

Theme Settings

Dynamic Content

Shopify Section Blocks

Responsive Design Strategies

Breakpoints

Grid System

Responsive Visibility

Mobile-First Approach

Off-Canvas Menu for Mobile

Accordion for Mobile Navigation

Touch-Friendly Design

Performance Optimization

Lazy Loading Images

Minify CSS and JavaScript

Reduce DOM Size

Optimize Animations

Accessibility Considerations

Keyboard Navigation

ARIA Attributes

Focus Styles

Screen Reader Text

Testing and Troubleshooting

Cross-Browser Testing

Device Testing

Common Issues and Solutions

Dropdown not appearing

Mobile menu not working

Dropdown positioning issues

Performance issues

Debugging Tools