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 use click events instead by adding data-options="is_hover: false"
to the <nav>
element. See an example below.
HTML
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</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 with Dropdown</a>
<ul class="dropdown">
<li><a href="#">First 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
).
Fixed Navigation
<div class="fixed">
<nav class="top-bar" data-topbar>
...
</nav>
</div>
Contain to Grid
<div class="contain-to-grid">
<nav class="top-bar" data-topbar>
...
</nav>
</div>
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 sticky_class
matches whatever class you use in the variable.
<div class="contain-to-grid sticky">
<nav class="top-bar" data-topbar>
...
</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 data-options="is_hover: false">
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
<li class="divider"></li>
Button
<li class="has-form">
<a href="http://foundation.zurb.com/docs" class="button">Get Lucky</a>
</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>
<ul class="title-area">
<li class="name"><!-- Leave this empty --></li>
...
</ul>
</nav>
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: rem-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: rem-calc(17);
/* Style the top bar dropdown elements */
$topbar-dropdown-bg: #222;
$topbar-dropdown-link-color: #fff;
$topbar-dropdown-link-bg: #333;
$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: normal;
$topbar-link-font-size: rem-calc(13);
$topbar-link-hover-lightness: -10%; // Darken by 10%
$topbar-link-bg-hover: #272727 ;
$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-dropdown-label-color: #555;
$topbar-dropdown-label-text-transform: uppercase;
$topbar-dropdown-label-font-weight: bold;
$topbar-dropdown-label-font-size: rem-calc(10);
/* Top menu icon styles */
$topbar-menu-link-transform: uppercase;
$topbar-menu-link-font-size: rem-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: #{lower-bound($medium-range)} !default; // Change to 9999px for always mobile layout
$topbar-media-query: $medium-up !default;
/* 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
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 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
}
Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
@import "foundation/components/top-bar";