Top Bar Navigation

By Rafi

navigation nav menu top bar

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

Top Bar Navigation

By Rafi

Scroll Hiding Nav

Product Filters

Responsive Breadcrumb with Page Number

Top Bar Navigation

By Rafi

Similar Building Blocks

Scroll Hiding Nav

Product Filters

Responsive Breadcrumb with Page Number