Foundation
Top Bar
The Foundation Top Bar gives you a great way to display a complex navigation bar on small or large screens.
Build With HTML Classes
The top bar is a pretty complex piece of magical UI goodness, which makes it really difficult to create a mixin from it. We rely on many presentational classes to accomplish the styles and there's a lot happening in the JS. The top bar is hoverable by default but can be changed to a click event by adding a simple data-options="is_hover:false" to the <nav> element. See an example below.
Basic Needs
The top bar has four main elements, three of which are needed for proper functionality: ul.title-area, a ul class="right/left element enclosed in a section class="top-bar-section", and the li.toggle-topbar element that will expand the menu in the mobile layout.
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).
Building the Nav
When building your bar it is good to be aware of how many links you're going to need in it so you can customize your responsive breakpoint accordingly. Build your navigation with ul.left and/or ul.right depending where you want links. To add items, simply include li elements with an anchor inside them for your top-level. To build a dropdown menu, you'll need to add has-dropdown to the li and include ul.dropdown after that anchor. Add a class of active to mark the current page.
Other Elements
To make this navigation nice and flexible, we've included patterns for elements like buttons, inputs and dividers. To create dividers between your navigation, just add an empty li.divider and you'll get some separation. You can use a small Foundation button in the nav, just include has-form as a class for its parent li. You can include two different input types: search and text. To use these, add a class of search to the parent 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">
<ul class="title-area">
<li class="name"><!-- Leave this empty --></li>
...
</ul>
</nav>Sticky Top Bar
You may also wrap your top bar in div class="contain-to-grid 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 stickyClass matches whatever class you use in the variable.
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1><a href="#">Top Bar Title </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">
<!-- Left Nav Section -->
<ul class="left">
<li class="divider"></li>
<li class="active"><a href="#">Main Item 1</a></li>
<li class="divider"></li>
<li><a href="#">Main Item 2</a></li>
<li class="divider"></li>
<li class="has-dropdown"><a href="#">Main Item 3</a>
<ul class="dropdown">
<li class="has-dropdown"><a href="#">Dropdown Level 1a</a>
<ul class="dropdown">
<li><label>Dropdown Level 2 Label</label></li>
<li><a href="#">Dropdown Level 2a</a></li>
<li><a href="#">Dropdown Level 2b</a></li>
<li class="has-dropdown"><a href="#">Dropdown Level 2c</a>
<ul class="dropdown">
<li><label>Dropdown Level 3 Label</label></li>
<li><a href="#">Dropdown Level 3a</a></li>
<li><a href="#">Dropdown Level 3b</a></li>
<li class="divider"></li>
<li><a href="#">Dropdown Level 3c</a></li>
</ul>
</li>
<li><a href="#">Dropdown Level 2d</a></li>
<li><a href="#">Dropdown Level 2e</a></li>
<li><a href="#">Dropdown Level 2f</a></li>
</ul>
</li>
<li><a href="#">Dropdown Level 1b</a></li>
<li><a href="#">Dropdown Level 1c</a></li>
<li class="divider"></li>
<li><a href="#">Dropdown Level 1d</a></li>
<li><a href="#">Dropdown Level 1e</a></li>
<li><a href="#">Dropdown Level 1f</a></li>
<li class="divider"></li>
<li><a href="#">See all →</a></li>
</ul>
</li>
<li class="divider"></li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider hide-for-small"></li>
<li class="has-dropdown"><a href="#">Main Item 4</a>
<ul class="dropdown">
<li><label>Dropdown Level 1 Label</label></li>
<li class="has-dropdown"><a href="#" class="">Dropdown Level 1a</a>
<ul class="dropdown">
<li><a href="#">Dropdown Level 2a</a></li>
<li><a href="#">Dropdown Level 2b</a></li>
<li class="has-dropdown"><a href="#">Dropdown Level 2c</a>
<ul class="dropdown">
<li><a href="#">Dropdown Level 3a</a></li>
<li><a href="#">Dropdown Level 3b</a></li>
<li><a href="#">Dropdown Level 3c</a></li>
</ul>
</li>
<li><a href="#">Dropdown Level 2d</a></li>
<li><a href="#">Dropdown Level 2e</a></li>
<li><a href="#">Dropdown Level 2f</a></li>
</ul>
</li>
<li><a href="#">Dropdown Level 1b</a></li>
<li><a href="#">Dropdown Level 1c</a></li>
<li class="divider"></li>
<li><label>Dropdown Level 1 Label</label></li>
<li><a href="#">Dropdown Level 1d</a></li>
<li><a href="#">Dropdown Level 1e</a></li>
<li><a href="#">Dropdown Level 1f</a></li>
<li class="divider"></li>
<li><a href="#">See all →</a></li>
</ul>
</li>
<li class="divider"></li>
<li class="has-form">
<form>
<div class="row collapse">
<div class="small-8 columns">
<input type="text">
</div>
<div class="small-4 columns">
<a href="#" class="alert button">Search</a>
</div>
</div>
</form>
</li>
<li class="divider show-for-small"></li>
<li class="has-form">
<a class="button" href="#">Button!</a>
</li>
</ul>
</section>
</nav>Clickable Topbar
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-options="is_hover:false">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.
$include-html-top-bar-classes: $include-html-classes;
/* Background color for the top bar */
$topbar-bg: #111;
/* Height and margin */
$topbar-height: 45px;
$topbar-margin-bottom: em-calc(30);
/* Control Input height for top bar */
$topbar-input-height: 2.45em;
/* Controlling the styles for the title in the top bar */
$topbar-title-weight: bold;
$topbar-title-font-size: em-calc(17);
/* Style the top bar dropdown elements */
$topbar-dropdown-bg: #222;
$topbar-dropdown-link-color: #fff;
$topbar-dropdown-link-bg: lighten($topbar-bg, 5%);
$topbar-dropdown-toggle-size: 5px;
$topbar-dropdown-toggle-color: #fff;
$topbar-dropdown-toggle-alpha: 0.5;
/* Set the link colors and styles for top-level nav */
$topbar-link-color: #fff;
$topbar-link-color-hover: #fff;
$topbar-link-color-active: #fff;
$topbar-link-weight: bold;
$topbar-link-font-size: em-calc(13);
$topbar-link-hover-lightness: -30%; /* Darken by 30% */
$topbar-link-bg-hover: darken($topbar-bg, 3%);
$topbar-link-bg-active: darken($topbar-bg, 3%);
$topbar-dropdown-label-color: #555;
$topbar-dropdown-label-text-transform: uppercase;
$topbar-dropdown-label-font-weight: bold;
$topbar-dropdown-label-font-size: em-calc(10);
/* Top menu icon styles */
$topbar-menu-link-transform: uppercase;
$topbar-menu-link-font-size: em-calc(13);
$topbar-menu-link-weight: bold;
$topbar-menu-link-color: #fff;
$topbar-menu-icon-color: #fff;
$topbar-menu-link-color-toggled: #888;
$topbar-menu-icon-color-toggled: #888;
/* Transitions and breakpoint styles */
$topbar-transition-speed: 300ms;
$topbar-breakpoint: em-calc(940); /* Change to 9999px for always mobile layout */
$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})";
/* Divider Styles */
$topbar-divider-border-bottom: solid 1px lighten($topbar-bg, 10%);
$topbar-divider-border-top: solid 1px darken($topbar-bg, 10%);
/* Sticky Class */
$topbar-sticky-class: ".sticky";
$topbar-arrows: true; //Set false to remove the triangle icon from the menu itemNote: em-calc(); is a function we wrote to convert px to em. It is included in _variables.scss.
Using the JavaScript
foundation.js are available on your page. You can refer to the javascript documentation on setting that up.
Just add foundation.topbar.js AFTER the foundation.js file. Your markup should look something like this:
<body>
...
<script>
document.write('<script src=/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</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 now supports data-options configuration.
{
index : 0,
stickyClass : '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,
scrolltop : true, // jump to top when sticky nav menu toggle is clicked
init : false
}