Foundation for Sites6.3.1 changelog
Component List

Top Bar

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

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.

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>

Advanced Layout

You can further divide a top bar into a title area and content area. Use the .top-bar-title class to create a title/branding area. Next to that can be any element, which is used for the rest of the content.

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

In the below example, we've combined the above pattern with the Responsive Toggler plugin, creating a responsive top bar with a toggle click trigger on mobile.

edit on codepen button 
<div class="top-bar">
  <div class="top-bar-title">
    <span data-responsive-toggle="responsive-menu" data-hide-for="medium">
      <button class="menu-icon dark" type="button" data-toggle></button>
    </span>
    <strong>Site Title</strong>
  </div>
  <div id="responsive-menu">
    <div class="top-bar-left">
      <ul class="dropdown menu" data-dropdown-menu>
        <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>
</div>
Site Title

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.