Product Design Lessons

Intro to Foundation  |   Lesson #106

How to re-create Top Bar with Foundation 6

Build a responsive menu with Foundation for Sites 6

Foundation 6 is out in the wild. One of the major improvements is the navigation structure. The new Menu component is a huge leap forward because you can make a modular navigation you can use on most every project. In this lesson, you’ll learn how to use the Foundation 6 menu component to build a Foundation 5 Top Bar replica.

We’ll start basic and build up.

Let’s start with the most basic menu.


<ul class="menu">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

If your design requires dropdowns, we’ll add them now. Adding a dropdown requires the .dropdown class and the data attribute to trigger the JS.


<ul class="dropdown menu" data-dropdown-menu>

From here we can add our nested <ul>’s for the dropdown.


<ul class="dropdown menu" data-dropdown-menu>
  <li>
    <a href="#">Drop 1</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 3A</a></li>
      <li><a href="#">Item 4A</a></li>
    </ul>
  </li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

Adding a second level to your dropdown menu is as easy as nesting another menu <ul> in one of the list items:


<ul class="dropdown menu" data-dropdown-menu>
  <li>
    <a href="#">Drop 1</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 3A</a></li>
      <li>
        <a href="#">Drop 2</a>
        <ul class="menu">
          <li><a href="#">Item 1B</a></li>
          <li><a href="#">Item 2B</a></li>
          <li><a href="#">Item 3B</a></li>
          <li><a href="#">Item 4B</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

Make it function like Top Bar.

There is still a .top-bar class in Foundation 6, but now it is wrapper that adds a visual CSS to the menu that is easy to style.


<div class="top-bar">
  <div class="top-bar-left">
  ...
  </div>
  <div class="top-bar-right">
  ...
  </div>
</div>

Here we have separated the left and right side of the menu with .top-bar-left and .top-bar-right. You can have menu items, dropdowns, or search forms in either side. There is a .menu-text class available that contains the site title or logo.

Time to get responsive!

First, we’ll add the Title Bar that will show on small screens and house our hamburger menu.


<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

What’s happening here:

  • data-responsive-toggle="main-menu" - this will toggle a menu that has this id on it.
  • data-hide-for="medium" - the mobile menu will be hidden on the medium and up breakpoints
  • .menu-icon - creates the hamburger icon

Now we’ll put it all together. We’ll make sure to add the id=”main-menu” to our menu.


<div class="top-bar" id="main-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu vertical medium-horizontal expanded" data-responsive-menu="drilldown medium-dropdown">
      <li class="has-submenu">
        <a href="#">One</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
</div>

In Foundation 6, we can now define the responsive behavior for each breakpoint.


<ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">

So let’s break this down:

  • Using the classes .vertical .medium-horizontal together will make the menu links horizontal on medium and larger screens and vertical on small.
  • The data attribute - data-responsive-menu="drilldown medium-dropdown" let’s you define a drilldown on small screens and dropdowns on medium and larger screens.

Let’s get stylin’

We’ll set a background and adjust the padding for .title-bar:


.title-bar {
  background: #333;
  padding: 0.9rem;
}

We’ll set a background for .top-bar:


.top-bar {
  background: $menu-background;

  ul {
    background: $menu-background;

    li {
      background: $menu-background;

      a {
        color: #fff;
      }
    }
  }
}

Awesome! Now you have Top Bar! You can get the complete code and see a demo below!

Check out the example ->


Next Steps

The new menu component in Foundation is very flexible and can be used in many different configurations to create the menu you need. If you’re upgrading from Foundation 5 or just like how Top Bar worked, now you know how to make a Top Bar replica in Foundation 6.

About the instructor

rafi

Rafi Benkual oversees the Foundation Forum. Rafi managed people, stores and small organizations before joining ZURB as our Foundation Advocate.