Top Bar

The Foundation Top Bar gives you a great way to display a complex navigation bar on small, medium or large screens.

Build With HTML Classes

The top bar is a pretty complex piece of magical UI goodness. We rely on many presentational classes to define its look and feel, and there's a lot happening in the JS. The top bar is hoverable by default, but you can change it to use click events instead by adding data-options="is_hover: false" to the <nav> element. If you have a hoverable topbar, it will close itself on click by default, but this behavior can be prevented by setting data-options="dropdown_autoclose: false". See an example below.

HTML

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
          <li class="active"><a href="#">Active link in dropdown</a></li>
        </ul>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>

Positioning the Bar

The top bar is built with a single nav element with a class of top-bar. It will take on full-browser width by default. To make the top bar stay fixed as you scroll, wrap it in div class="fixed". If you want your navigation to be set to your grid width, wrap it in div class="contain-to-grid". You may use fixed and contain-to-grid together in the wrapping div (div class="contain-to-grid fixed).

<div class="fixed">
  <nav class="top-bar" data-topbar role="navigation">
    ...
  </nav>
</div>

<div class="contain-to-grid">
  <nav class="top-bar" data-topbar role="navigation">
    ...
  </nav>
</div>

Sticky Top Bar

You may also wrap your top bar in div class="sticky" and put it anywhere within your markup. When the navigation hits the top of the browser, it will act like the fixed top bar and stick to the top as users continue to scroll. Note: If you are using SCSS, you can control the default sticky class by adjusting the $topbar-sticky-class variable. Make sure the JS variable for sticky_class matches whatever class you use in the variable.

You can also add sticky_on to your data-options attribute to allow your sticky bar to work on small, medium, or large when the page loads. This works in conjunction with the sticky class wrapper to target sticky for small, medium, or large. It will be sticky on all screen sizes by default.

Additionally, you can pass in an array to specify sticky on multiple sizes. For example, data-options="sticky_on: [small,large]" will be sticky on small and large, but NOT medium.

<div class="contain-to-grid sticky">
  <nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: large">
    ...
  </nav>
</div>

Clickable Top Bar

You can now make the top bar clickable by adding a data-attribute to the nav element. Here's an example:

<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: false">

Mobile Parent Links

Foundation will show the parent link on mobile navigation. A helpful way for mobile users navigate your site. Don't want them? Simply change the settings in the topbar.js file.

Built-in Components

Several common elements have been supported by default, each one of these elements gets added to either the ul.right or ul.left unordered lists within your Top Bar navigation.

Search Bar

<li class="has-form">
  <div class="row collapse">
    <div class="large-8 small-9 columns">
      <input type="text" placeholder="Find Stuff">
    </div>
    <div class="large-4 small-3 columns">
      <a href="#" class="alert button expand">Search</a>
    </div>
  </div>
</li>

Divider

Separate your buttons with dividers

<li class="divider"></li>

Button

Add buttons

<li class="has-form">
  <a href="https://get.foundation/docs" class="button">Get Lucky</a>
</li>

Label

Separate sections of your dropdowns with labels

<li><label>Dropdown Level 1 Label</label></li>

Remove the Title

If you want a bar that doesn't include a title, just take out the content within the list item, like so:

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name"><!-- Leave this empty --></li>
    ...
  </ul>
</nav>

Accessibility

The top bar is a complex component with a lot of different features. However, it's still fully keyboard and screen reader accessible. The main thing you need to add if upgrading from an older version of Foundation is the attribute role="navigation" to the top bar container. Additionally, if your page uses top bar and off-canvas navigation, add the attribute aria-hidden="true" to one of them—otherwise, the user's device will tab through (and possibly read) both of them before reaching any content.

Available SCSS Variables

We do include SCSS variable to help you control some of the styles for the top bar. Overall the styles are written mobile first, so they are much easier to override than the previous iteration of the top bar.

//
// Top Bar Variables
//
$include-html-top-bar-classes: $include-html-classes;

// Background color for the top bar
$topbar-bg-color: $oil;
$topbar-bg: $topbar-bg-color;

// Height and margin
$topbar-height: rem-calc(45);
$topbar-margin-bottom: 0;

// Controlling the styles for the title in the top bar
$topbar-title-weight: $font-weight-normal;
$topbar-title-font-size: rem-calc(17);

// Style the top bar dropdown elements
$topbar-dropdown-bg: $oil;
$topbar-dropdown-link-color: $white;
$topbar-dropdown-link-color-hover: $white;
$topbar-dropdown-link-bg: $oil;
$topbar-dropdown-link-bg-hover: $oil;
$topbar-dropdown-link-weight: $font-weight-normal;
$topbar-dropdown-toggle-size: 5px;
$topbar-dropdown-toggle-color: $white;
$topbar-dropdown-toggle-alpha: 0.4;

// Set the link colors and styles for top-level nav
$topbar-link-color: $white;
$topbar-link-color-hover: $white;
$topbar-link-color-active: $white;
$topbar-link-color-active-hover: $white;
$topbar-link-weight: $font-weight-normal;
$topbar-link-font-size: rem-calc(13);
$topbar-link-hover-lightness: -10%; // Darken by 10%
$topbar-link-bg: $topbar-bg;
$topbar-link-bg-hover: $jet;
$topbar-link-bg-color-hover: $charcoal;
$topbar-link-bg-active: $primary-color;
$topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
$topbar-link-font-family: $body-font-family;
$topbar-link-text-transform: none;
$topbar-link-padding: $topbar-height / 3;
$topbar-back-link-size: $h5-font-size;
$topbar-link-dropdown-padding: 20px;
$topbar-button-font-size: 0.75rem;
$topbar-button-top: 7px;

$topbar-dropdown-label-color: $monsoon;
$topbar-dropdown-label-text-transform: uppercase;
$topbar-dropdown-label-font-weight: $font-weight-bold;
$topbar-dropdown-label-font-size: rem-calc(10);
$topbar-dropdown-label-bg: $oil;

// Top menu icon styles
$topbar-menu-link-transform: uppercase;
$topbar-menu-link-font-size: rem-calc(13);
$topbar-menu-link-weight: $font-weight-bold;
$topbar-menu-link-color: $white;
$topbar-menu-icon-color: $white;
$topbar-menu-link-color-toggled: $jumbo;
$topbar-menu-icon-color-toggled: $jumbo;

// Transitions and breakpoint styles
$topbar-transition-speed: 300ms;
// Using rem-calc for the below breakpoint causes issues with top bar
$topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout
$topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})";

// Divider Styles
$topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%);
$topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%);

// Sticky Class
$topbar-sticky-class: ".sticky";
$topbar-arrows: true; //Set false to remove the triangle icon from the menu item

Note: rem-calc(); is a function we wrote to convert px to rem. It is included in _variables.scss.

Using the Javascript

Just add foundation.topbar.js AFTER the foundation.js file. Your markup should look something like this:

<body>

  ...

  <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.topbar.js"></script>
  <!-- Other JS plugins can be included here -->

  <script>
    $(document).foundation();
  </script>

</body>

Required Foundation Library: foundation.topbar.js

Optional Javascript Configuration

Top bar supports data-options configuration.

{
  sticky_class : 'sticky',
  custom_back_text: true, // Set this to false and it will pull the top level link name as the back text
  back_text: 'Back', // Define what you want your custom back text to be if custom_back_text: true
  is_hover: true,
  mobile_show_parent_link: false, // will copy parent links into dropdowns for mobile navigation
  scrolltop : true // jump to top when sticky nav menu toggle is clicked
}

Adding New Top-bar After Page Load

If you add new content after the page has been loaded, you will need to reinitialize the Foundation JavaScript by running the following:

$(document).foundation();

Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them.

$(document).foundation('topbar', 'reflow');

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/top-bar";