Foundation topbar

Foundation comes with a topbar wit navigation supports. Tt is quite useful for website with minimal header. The navigation items are displayed in wide screen and then hide into a menu button in small screen.

Here is the result of the same top bar displaying in both desktop and mobile.

A basic example:

 1<nav class="top-bar" data-topbar>
 2  <ul class="title-area">
 3    <li class="name">
 4       <h1><a href="#">My Site</a></h1>
 5    </li>
 6    <li class="toggle-topbar"><a href="#"><span>Menu</span></a>
 7    </li>
 8  </ul>
 9  <section class="top-bar-section">
10    <ul class="right">
11      <li><a href="#">Right Button</a></li>
12      <li><a href="#">Another button</a></li>
13    </ul>
14  </section>

A full example:

 1<div class="sticky">
 2  <nav class="top-bar" data-topbar>
 3    <ul class="title-area">
 4      <li class="name">
 5        <h1><a href="#">My Site</a></h1>
 6      </li>
 7      <li class="toggle-topbar"><a href="#"><span>Menu</span></a></li>
 8    </ul>
 9    <section class="top-bar-section">
10      <ul class="left">
11        <li><a href="#">A button on left</a></li>
12      </ul>
13      <ul class="right">
14        <li><a href="#">Right Button</a></li>
15        <li class="has-dropdown">
16          <a href="#">Right Button Dropdown</a>
17          <ul class="dropdown">
18            <li><a href="#">First link in dropdown</a></li>
19            <li><a href="#">Second link in dropdown</a></li>
20          </ul>
21        </li>
22      </ul>
23    </section>
24  </nav>

For more examples, please take a look at the Foundation documentation.

Note: Using the Foundation top-bar doesn’t mean it has to be in black background. This tutorial by Mark Teekman shows how we can customize the top-bar.

What’s next? We’re going to take a look at “Off canvas”.

overlaied image when clicked on thumbnail

Makzan | Mobile web design | Table of Content