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

---