How to Create Responsive Mega Menus With UIkit

Final product image — What You'll Be Creating

In this tutorial, we’ll continue exploring the UIkit framework and learn how to build responsive mega menus by taking advantage of its components.

As with other UIkit tutorials, a familiarization with this framework will be beneficial to follow along yet not mandatory.

Our UIkit Mega Menus

Here’s our first mega menu, which displays within a panel (full page view):

And the second one, which uses a full width container (full page view):

To check how the mega menus behave on different screens, be sure to view them from a large screen and resize your browser window. You'll notice that:

On mobile screens, they are part of a single off-canvas menu.
On large screens (≥1200px), their appearance differs. On the first demo, the mega menus’ width depends on the top menu’s width. However, on the second demo, the mega menus’ width is equal to the viewport width. Additionally, in this case, they appear with slide animation.

We’ll Need These UIkit Components

Assuming that we’ve installed the required UIkit files, let’s look at the main UIkit components that we’ll use to build the menus:

To thoroughly understand what each component or utility class that we’re going to use does, don't forget to inspect the generated markup and styles through your browser inspector.

Mega Menu Example #1

On small screens, the site header will look like this:

In a classic scenario, to reveal the off-canvas menu, we’ll click on the hamburger toggle button:

On large screens, the top menu will appear while the off-canvas toggle button will become hidden:

The mega menus will emerge like this:

The HTML

The header will contain a nav element. Within it, we’ll put:

The logo
The menu
The search bar toggle button
A link to the wishlist page
The mobile menu (off-canvas) toggle button
The off-canvas

Let’s highlight the key things:

From the above header elements, the search bar toggle button and the link that sends to the wishlist page won’t have any functionality as this is beyond the scope of this tutorial.
The off-canvas toggle and the off-canvas itself will appear on screens smaller than 1200px. We’ll do this by attaching the uk-hidden@l utility class to the target elements.
On the contrary, the top menu will appear on screens at least 1200px wide. We’ll do this by attaching the uk-visible@l class to it.
To initialize the UIkit navbar we’ll pass the uk-navbar attribute to the nav element.
To create the mega menus of the first two items of the top menu we’ll use the uk-dropdown attribute from the dropdown component. Here we’ll pass specific options to this attribute for defining the boundaries of the mega menus, their position, and the offset between the mega menu and its associated toggle. You can, even more, customize it as you wish. For instance, try to add the mode: click option for forcing click mode only.
We’ll use the uk-column-1-* classes to specify the desired width for the columns inside the mega menus. That said, the mega menu of the first item of the top menu will have uk-width-1-3 as it contains three lists, while the mega menu of the second item will have uk-width-1-2 as it contains two lists.
Similarly, for the sub-menu of the last item of the top menu, we’ll also use the uk-dropdown attribute. However, here we’ll customize only its offset to match the other menus offset. This won’t be a mega menu though, thus it will sit below the associated toggle by default.
The off-canvas menu will be built by following the structure of the off-canvas component. To customize its behavior according to our needs, we’ll pass a few options to the required uk-offcanvas attribute. For instance, the mode option determines the animation mode. Possible values are slide, reveal, push, and none. In our case, we’ll go with the reveal mode.

Here’s the full markup:

<header class="page-header uk-box-shadow-medium uk-background-default" uk-sticky>
  <div class="uk-container uk-container-expand uk-height-1-1">
    <nav class="uk-height-1-1" uk-navbar>
      <a href="" class="uk-flex uk-flex-middle">
        <img width="178" height="38" src="horizontal-logo-mobile.svg" alt="forecastr logo">
      </a>

      <ul class="uk-navbar-nav uk-navbar-center uk-visible@l">
        <li class="multi">
          <a href="">
            Platform
            <span uk-icon="icon: chevron-down"></span>
          </a>

          <div class="uk-navbar-dropdown" uk-dropdown="boundary: .uk-navbar-nav; boundary-align: true; pos: bottom-justify; offset: 10">
            <ul class="uk-nav uk-navbar-dropdown-nav uk-column-1-3">
              <li>
                <span uk-icon="icon: cog"></span>
                <ul class="uk-nav uk-navbar-dropdown-nav uk-margin-top">
                  <li class="uk-nav-header uk-margin-small-bottom uk-text-bold">For Companies</li>
                  <li><a href="#">Build</a></li>
                  <li><a href="#">Train</a></li>
                  <li><a href="#">Compare</a></li>
                </ul>
              </li>
              <!-- two more items here -->
            </ul>
          </div>
        </li>
        <li>
          <a href="">Customers</a>
        </li>
        <li class="multi">
          <a href="">
            Solutions
            <span uk-icon="icon: chevron-down"></span>
          </a>
          <div class="uk-navbar-dropdown" uk-dropdown="boundary: .uk-navbar-nav; boundary-align: true; pos: bottom-justify; offset: 10">
            <ul class="uk-nav uk-navbar-dropdown-nav uk-column-1-2">
              <li>
                <span uk-icon="icon: lifesaver"></span>
                <ul class="uk-nav uk-navbar-dropdown-nav uk-margin-top">
                  <li class="uk-nav-header uk-margin-small-bottom uk-text-bold">Business</li>
                  <li><a href="#">For Marketing</a></li>
                  <li><a href="#">For Sales</a></li>
                </ul>
              </li>
              <li>
                <span uk-icon="icon: comments"></span>
                <ul class="uk-nav uk-navbar-dropdown-nav uk-margin-top">
                  <li class="uk-nav-header uk-margin-small-bottom uk-text-bold">Education</li>
                  <li><a href="#">For Teachers</a></li>
                  <li><a href="#">For Students</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </li>
        <li>
          <a href="">Pricing</a>
        </li>
        <li>
          <a href="">
            Resources
            <span uk-icon="icon: chevron-down"></span>
          </a>
          <div class="uk-navbar-dropdown" uk-dropdown="offset: 10">
            <ul class="uk-nav uk-navbar-dropdown-nav">
              <li><a href="#">Blog</a></li>
              <li><a href="#">Documentation</a></li>
              <li><a href="#">FAQ</a></li>
            </ul>
          </div>
        </li>
      </ul>

      <div class="uk-navbar-right">
        <button class="uk-icon-link uk-margin-right" uk-icon="search" type="button" aria-label="Toggle Search Form"></button>
        <a href="#" class="uk-icon-link" uk-icon="heart" aria-label="Open Wishlist Page"></a>
        <button class="uk-margin-left uk-hidden@l" uk-toggle="target: #offcanvas" uk-icon="icon: menu" type="button" aria-label="Toggle Mobile Menu"></button>
      </div>
    </nav>
  </div>

  <div class="offcanvas uk-hidden@l" id="offcanvas" uk-offcanvas="flip: true; overlay: true; mode: reveal">
    <div class="uk-offcanvas-bar">
      <button class="uk-offcanvas-close" type="button" uk-close aria-label="Close Mobile Menu"></button>

      <ul class="top-menu uk-nav uk-margin-top">
        <li>
          <a href="">
            Platform
          </a>
          <ul class="sub-menu uk-nav">
            <li class="uk-nav-header uk-text-bold">For Companies</li>
            <li><a href="#">Build</a></li>
            <li><a href="#">Train</a></li>
            <li><a href="#">Compare</a></li>
          </ul>
          <!-- twp more lists here -->
        </li>
        <!-- more itesm here -->
      </ul>
    </div>
  </div>
</header>

The dropdown component is a special case of the drop one with its own styling. That said, we can use the uk-drop attribute instead of the uk-dropdown one with the same result.

The CSS

Coming up next, we’ll specify some straightforward styles. Nothing really important. Here they are:

.page-header {
  height: 80px;
}

.page-header .uk-navbar-nav > li > a,
.page-header .uk-icon-link,
.page-header .uk-icon-link:hover {
  color: #333;
}

.page-header .uk-navbar-nav > li > a {
  padding: 0 25px;
}

.page-header .uk-navbar-nav > li > a:hover {
  background: #f6f7f9;
}

.page-header .multi .uk-navbar-dropdown {
  padding: 0 25px;
}

.page-header .uk-navbar-dropdown-nav .uk-nav-header {
  color: #7c2a8a;
}

.page-header [class*="uk-column-"] > li {
  padding: 25px 0;
}

.page-header [class*="uk-column-"] > li:not(:last-child) {
  border-right: 1px solid #e5e5e5;
}

.page-header [class*="uk-column-"] .uk-icon {
  color: #c6c6c6;
}

.offcanvas .uk-nav-header {
  color: rgba(246, 247, 249, 0.5);
}

.offcanvas .top-menu > li + li {
  margin-top: 10px;
}

.offcanvas .sub-menu {
  border-left: 1px solid #484848;
}

.offcanvas .sub-menu li {
  padding-left: 30px;
}

.offcanvas .sub-menu li.uk-nav-header {
  padding-left: 10px;
}

Mega Menu Example #2

In this second demo, the only thing that will change is the way that the sub-menus will appear:

The HTML

The markup will stay the same, yet we’ll do the following small changes:

Add the dropbar: true option to the uk-navbar attribute of the nav element. This will generate the slide animation for our mega menus by appending an empty div element with the class of uk-navbar-dropbar as a sibling of the nav.
Remove the predefined top and bottom paddings from the mega menus of the first two items of the top menu by adding the uk-padding-remove-top and uk-padding-remove-bottom utility classes.
Remove the offsets from all dropdowns.
Remove the uk-dropdown attribute from the sub-menu of the last item of the top menu as we don't need it (we removed the offset).

Here’s the main header structure:

<header class="page-header uk-box-shadow-medium uk-background-default" uk-sticky>
  <div class="uk-container uk-container-expand uk-height-1-1">
    <nav class="uk-height-1-1" uk-navbar="dropbar: true">
      <a href="" class="uk-flex uk-flex-middle">
        <img width="178" height="38" src="horizontal-logo-mobile.svg" alt="forecastr logo">
      </a>

      <!-- top menu with mega menus here -->

      <div class="uk-navbar-right">
        <button class="uk-icon-link uk-margin-right" uk-icon="search" type="button" aria-label="Toggle Search Form"></button>
        <a href="#" class="uk-icon-link" uk-icon="heart" aria-label="Open Wishlist Page"></a>
        <button class="uk-margin-left uk-hidden@l" uk-toggle="target: #offcanvas" uk-icon="icon: menu" type="button" aria-label="Toggle Mobile Menu"></button>
      </div>
    </nav>
  </div>

  <!-- off-canvas here -->
</header>

Conclusion

In this tutorial, we wore the front-end developer’s hat and used UIkit components for creating responsive site headers with mega menus on their desktop version. Of course, this is just one implementation. You can certainly build them with UIkit in another way.

Without a doubt, UIkit does a great job of giving us the tools to build complex mega menus with minimal effort and a lot of customization settings. At this point, you should hopefully have a good understanding of how to set up mega menus with the help of UIkit.

Uikit Mega Menu in WordPress

But wait a moment! Is having the markup for one or two mega menus really enough? Do you agree that it will be even more effective if we make dynamic version of these menus? I'm sure you’ve raised your hand at this point!

The good news is that in another tutorial, we’ll wear the WordPress developer’s hat and challenge ourselves to convert one of these menus into a dynamic one by using the Walker Class. So stay tuned!

As always, thanks a lot for reading!

How to Create Responsive Mega Menus With UIkit

Our UIkit Mega Menus

We’ll Need These UIkit Components

Mega Menu Example #1

The HTML

The CSS

Mega Menu Example #2

The HTML

Conclusion

Uikit Mega Menu in WordPress

More UIkit Tutorials on Tuts+