Let us know what you think about the new Building Blocks

Top Bar Navigation

By Rafi

F6
#
How do I use This?

A responsive navigation with dropdowns on medium and larger screens and a drilldown menu on small screens. Mimics the Foundation 5 Top Bar component but coded in Foundation 6.

HTML
<div class="top-bar foundation-5-top-bar">
  <div class="top-bar-title">
    <span data-responsive-toggle="responsive-menu" data-hide-for="medium">
      <button class="menu-icon" type="button" data-toggle></button>
    </span>
    <strong>Site Title</strong>
  </div>
  <div id="responsive-menu">
    <div class="top-bar-left">
      <ul class="dropdown vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown" data-auto-height="true" data-animate-height="true">
        <li>
          <a href="#">One</a>
          <ul class="menu">
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li>
              <a href="#">Three</a>
              <ul class="menu">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li>
                  <a href="#">Three</a>
                  <ul class="menu">
                    <li><a href="#">One</a></li>
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
      </ul>
    </div>
    <div class="top-bar-right">
      <ul class="menu">
        <li><input type="search" placeholder="Search"></li>
        <li><button type="button" class="button">Search</button></li>
      </ul>
    </div>
  </div>
</div>

$foundation-5-top-bar-bg: #333;
$foundation-5-top-bar-text-color: $white;

.foundation-5-top-bar {
  background: $foundation-5-top-bar-bg;
  color: $foundation-5-top-bar-text-color;

  .menu {
    background: $foundation-5-top-bar-bg;

    a {
      color: $foundation-5-top-bar-text-color;
    }
  }

  .is-dropdown-submenu {
    border: 0;
  }

  .is-dropdown-submenu-item.opens-right a::after {
    border-color: transparent transparent transparent $foundation-5-top-bar-text-color;
  }

  .js-drilldown-back > a::before {
    border-color: transparent $foundation-5-top-bar-text-color transparent transparent;
  }

  .is-drilldown-submenu-parent > a::after {
    border-color: transparent transparent transparent $foundation-5-top-bar-text-color;
  }

  .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after {
    border-color: $foundation-5-top-bar-text-color transparent transparent;
  }
}


.foundation-5-top-bar {
  background: #333;
  color: #fefefe;
}

.foundation-5-top-bar .menu {
  background: #333;
}

.foundation-5-top-bar .menu a {
  color: #fefefe;
}

.foundation-5-top-bar .is-dropdown-submenu {
  border: 0;
}

.foundation-5-top-bar .is-dropdown-submenu-item.opens-right a::after {
  border-color: transparent transparent transparent #fefefe;
}

.foundation-5-top-bar .js-drilldown-back > a::before {
  border-color: transparent #fefefe transparent transparent;
}

.foundation-5-top-bar .is-drilldown-submenu-parent > a::after {
  border-color: transparent transparent transparent #fefefe;
}

.foundation-5-top-bar .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after {
  border-color: #fefefe transparent transparent;
}

JS