148 lines
5.9 KiB
Markdown
148 lines
5.9 KiB
Markdown
---
|
||
title: Top Bar
|
||
description: The new top bar is a simpler wrapper around our flexible menu components.
|
||
video: cxPwwixHEJg
|
||
sass: ./scss/components/_top-bar.scss
|
||
flex: true
|
||
---
|
||
|
||
<div class="callout training-callout">
|
||
<p>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.</p>
|
||
<a href="http://zurb.com/university/foundation-intro" target="_blank">Find out more about Foundation training classes →</a>
|
||
</div>
|
||
|
||
## 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](dropdown-menu.html), 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.
|
||
|
||
<p>
|
||
<a class="" data-open-video="0:58"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
|
||
</p>
|
||
|
||
<div class="docs-codepen-container">
|
||
<a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/eWrwKP?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
|
||
</div>
|
||
|
||
```html_example
|
||
<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>
|
||
```
|
||
|
||
<br>
|
||
|
||
<div class="primary callout">
|
||
<p>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 <a href="responsive-navigation.html">responsive navigation</a> to learn more.</p>
|
||
</div>
|
||
|
||
---
|
||
|
||
## Advanced Layout
|
||
|
||
<p>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 <code>.title-bar</code> and the attribute <code>data-responsive-toggle</code>. The value of <code>data-responsive-toggle</code> should be the ID of the menu you're toggling. Lastly, add <code>data-toggle</code> to the element that will trigger the toggle. The value of <code>data-toggle</code> should also be the ID of the menu you're toggling.</p>
|
||
|
||
<p>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 <code>data-hide-for</code> attribute in HTML, or the <code>hideFor</code> setting in JavaScript.</p>
|
||
|
||
<div class="docs-codepen-container">
|
||
<a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/LymroM?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
|
||
</div>
|
||
|
||
```html_example
|
||
<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="docs-codepen-container">
|
||
<a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/XRYbZa?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
|
||
</div>
|
||
|
||
```html
|
||
<div class="top-bar stacked-for-medium">
|
||
<!-- ... -->
|
||
</div>
|
||
```
|
||
|
||
<div class="top-bar stacked-for-medium">
|
||
<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>
|
||
|
||
---
|
||
|
||
## Sticky Navigation
|
||
|
||
See the documentation for the [Sticky](sticky.html#sticky-navigation) plugin to see how to easily make a sticky nav bar.
|