Foundation for Sites6.9.0 changelog
Component List

Top Bar

The new top bar is a simpler wrapper around our flexible menu components.

Basics

A top bar (.top-bar) can have two sections: a left-hand section (.top-bar-left) and a right-hand section (.top-bar-right). On small screens, these sections stack on top of each other.

In the below example, our top bar includes a dropdown menu, along with a text input field and action button. The dropdown menu inherits the background color of the top bar. If you're using the Sass version of Foundation, you can change this with the $topbar-submenu-background variable.

Watch this part in video

edit on codepen button 
<div class="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <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 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>

The features of Foundation 5's top bar are still around, but they've been reworked into smaller, individual plugins. Check out our page on responsive navigation to learn more.

Advanced Layout

To set up a Responsive menu with toggle click trigger on mobile, first give your menu a unique ID. Next, add a title bar with the class .title-bar and the attribute data-responsive-toggle. The value of data-responsive-toggle should be the ID of the menu you're toggling. Lastly, add data-toggle to the element that will trigger the toggle. The value of data-toggle should also be the ID of the menu you're toggling.

By default, the title bar will be visible on small screens, and the Menu hides. At the medium breakpoint, the title bar disappears, and the menu is always visible. This breakpoint can be changed with the data-hide-for attribute in HTML, or the hideFor setting in JavaScript.

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

<div class="top-bar" id="responsive-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li class="has-submenu">
        <a href="#0">One</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#0">One</a></li>
          <li><a href="#0">Two</a></li>
          <li><a href="#0">Three</a></li>
        </ul>
      </li>
      <li><a href="#0">Two</a></li>
      <li><a href="#0">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>
Menu

Stacking

By default, the two sections of a top bar will stack on top of each other on small screens. This can be changed by adding the class .stacked-for-medium or .stacked-for-large.

edit on codepen button 
<div class="top-bar stacked-for-medium">
  <!-- ... -->
</div>

See the documentation for the Sticky plugin to see how to easily make a sticky nav bar.

Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

NameTypeDefault ValueDescription
$topbar-padding Number 0.5rem

Padding for the top bar.
$topbar-background Color $light-gray

Background color for the top bar. This color also cascades to menus within the top bar.
$topbar-submenu-background Color $topbar-background

Background color submenus within the top bar. Usefull if $topbar-background is transparent.
$topbar-title-spacing Number 0.5rem 1rem 0.5rem 0

Spacing for the top bar title.
$topbar-input-width Number 200px

Maximum width of <input> elements inside the top bar.
$topbar-unstack-breakpoint Breakpoint medium

Breakpoint at which top bar switches from mobile to desktop view.

Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

top-bar-container

@include top-bar-container;

Adds styles for a top bar container.

top-bar-stacked

@include top-bar-stacked;

Makes sections of a top bar stack on top of each other.

top-bar-unstack

@include top-bar-unstack;

Undoes the CSS applied by the top-bar-stacked() mixin.