5.9 KiB
| title | description | video | sass | flex |
|---|---|---|---|---|
| Top Bar | The new top bar is a simpler wrapper around our flexible menu components. | cxPwwixHEJg | ./scss/components/_top-bar.scss | true |
Navigation is one the most crucial part of your site. Be a navigation guru with our Foundation online webinar training. You’ll learn techniques for creating responsive navigations that work with any type of site. In addition to that you can learn tips and tricks and best practices for all of Foundation’s components.
Find out more about Foundation training classes →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
<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.
<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>
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.
<div class="top-bar stacked-for-medium">
<!-- ... -->
</div>
Sticky Navigation
See the documentation for the Sticky plugin to see how to easily make a sticky nav bar.