Foundation

Navigation

Direct users around in style. There are navigation options for a number of situations, and everything is designed to work cross-device.

Top Bar

The navigation top bar in Foundation gives you a lot of control over how you build and style your own version. We wanted to leave as much control in your hands as possible without causing headaches.

Try it out as a fixed bar on the top of the page or even as a piece inside the grid. By default, the responsive layout kicks in at 940px, but you can change that by updating your Scss settings file or changing it with the customizer upon download.

  • 
    <div class="row">
      <div class="twelve columns">
        <nav class="top-bar">
          <ul>
            <!-- Title Area -->
            <li class="name">
              <h1>
                <a href="#">
                  Top Bar Title
                </a>
              </h1>
            </li>
            <li class="toggle-topbar"><a href="#"></a></li>
          </ul>
    
          <section>
            <!-- Left Nav Section -->
            <ul class="left">
              <li class="divider"></li>
              <li class="has-dropdown">
                <a class="active" href="#">Item 1</a>
                <ul class="dropdown">
                  <li><label>Section Name</label></li>
                  <li class="has-dropdown">
                    <a href="#" class="">Level 1, Has Dropdown</a>
                    <ul class="dropdown">
                      <li><a href="#">Level 2</a></li>
                      <li><a href="#">Level 2</a></li>
                      <li class="has-dropdown"><a href="#">Level 2, Has Dropdown</a>
                        <ul class="dropdown">
                          <li><label>Section</label></li>
                          <li><a href="#">Level 3</a></li>
                          <li><a href="#">Level 3</a></li>
                          <li class="divider"></li>
                          <li><a href="#">Level 3</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Level 2</a></li>
                      <li><a href="#">Level 2</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Level 1</a></li>
                  <li><a href="#">Level 1</a></li>
                  <li class="divider"></li>
                  <li><label>Section Name</label></li>
                  <li><a href="#">Level 1</a></li>
                  <li><a href="#">Level 1</a></li>
                  <li><a href="#">Level 1</a></li>
                  <li class="divider"></li>
                  <li><a href="#">See all &rarr;</a></li>
                </ul>
              </li>
              <li class="divider hide-for-small"></li>
            </ul>
    
            <!-- Right Nav Section -->
            <ul class="right">
              <li class="divider show-for-medium-and-up"></li>
              <li class="has-dropdown">
                <a href="#">Item 2</a>
                <ul class="dropdown">
                  <li><label>Section Name</label></li>
                  <li><a href="#" class="">Level 1</a></li>
                  <li><a href="#">Dropdown Option</a></li>
                  <li><a href="#">Dropdown Option</a></li>
                  <li class="divider"></li>
                  <li><label>Section Name</label></li>
                  <li><a href="#">Dropdown Option</a></li>
                  <li><a href="#">Dropdown Option</a></li>
                  <li><a href="#">Dropdown Option</a></li>
                  <li class="divider"></li>
                  <li><a href="#">See all &rarr;</a></li>
                </ul>
              </li>
            </ul>
          </section>
        </nav>
      </div>
    </div>
    

Building the Bar

The top bar contains a lot of different parts. You can see the complete code above, or learn how to build it piece-by-piece below.
  • Basic Needs

    The top bar has three main elements, three of which are needed for proper functionality: the title ul, one of the section ul class="right/left elements and the li.toggle-topbar element that will expand the menu in the repsonsive layout. You can leave out the li class="name" as long as you include the .toggle-topbar element.

    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.

    Building the Nav

    When building your bar it is good to be aware of how many links your are 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 and anchor inside them for your top-level link. To build a dropdown menu you'll need to add has-dropdown to the li and include ul.dropdown right 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-button 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.

    Sticky Top Bar

    As of 3.2.4, you can wrap you topbar 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.

  • 
    <!-- Basic Needs -->
    <nav class="top-bar">
      <ul>
        <li class="name"><h1><a href="#">Title</a></h1></li>
        <li class="toggle-topbar"><a href="#"></a></li>
      </ul>
      <section>
        <ul class="left">
          <li><a href="#">Link</a></li>
        </ul>
    
        <ul class="right">
          <li><a href="#">Link</a></li>
        </ul>
      </section>
    </nav>
    
    <!-- Positioning the Top Bar -->
    <div class="fixed contain-to-grid">
      <!-- <nav> goes here -->
    </div>
    
    <!-- Building the Nav -->
    <section>
      <ul class="left">
        <li><a href="#">Link</a></li>
    
        <li class="has-dropdown">
          <a href="#">Link</a>
    
          <ul class="dropdown">
            <li><a href="#">Dropdown Link</a></li>
          </ul>
    
        </li>
      </ul>
    
      <ul class="right">
        <li class="active"><a href="#">Link</a></li>
      </ul>
    </section>
    
    <!-- Other elements for Top Bar -->
    <li class="divider"></li>
    
    <li class="search">
      <form class="collapse">
        <input type="text">
        <button type="submit" class="secondary radius button">Search</button>
      </form>
    </li>
    
    <li class="search">
      <form>
        <input type="search">
      </form>
    </li>
    
    <li class="has-button">
      <a class="small button" href="#">Button!</a>
    </li>
    

Nav Bar

The default top nav bar for Foundation includes the main nav options as well as hover dropdowns that support either a list of anchors or arbitrary content (even Grid content).


Vertical Nav

  • The same nav bar seen above, with the same structure, can be made a vertical nav bar that still supports flyout content by adding a class of .vertical to the element. This is ideal for sidebar navigation, and is very similar to the vertical tabs seen on the Tabs documentation page.

  • 
    <ul class="nav-bar vertical">
      <li class="active"><a href="#">Nav Item 1</a></li>
      <li class="has-flyout">
        <a href="#">Nav Item 2</a>
        <a href="#" class="flyout-toggle"><span> </span></a>
        <ul class="flyout">
          <li><a href="#">Sub Nav Item 1</a></li>
          <li><a href="#">Sub Nav Item 2</a></li>
          <li><a href="#">Sub Nav 3</a></li>
          <li><a href="#">Sub Nav 4</a></li>
          <li><a href="#">Sub Nav Item 5</a></li>
        </ul>
      </li>
      <li class="has-flyout">
        <a href="#">Nav Item 3</a>
        <a href="#" class="flyout-toggle"><span> </span></a>
        <div class="flyout">
          <h5>Regular Dropdown</h5>
          <div class="row">
            <div class="six columns">
              <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
            </div>
            <div class="six columns">
              <p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
            </div>
          </div>
        </div>
      </li>
      <li>
        <a href="#">Nav Item 4</a>
      </li>
    </ul>
    

Side Nav

Side nav, like you'll see on the Foundation main site, is useful for sections either of a site or of the page.

  • 
    <ul class="four side-nav">
      <li class="active"><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li class="divider"></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
    

Sub Nav

This simple subnav is great for moving between different states of a page. We use these frequently to show iterations of something, typically by date, but they're also handy for these like filters.

  • 
    <dl class="sub-nav">
      <dt>Filter:</dt>
      <dd class="active"><a href="#">All</a></dd>
      <dd><a href="#">Active</a></dd>
      <dd><a href="#">Pending</a></dd>
      <dd><a href="#">Suspended</a></dd>
    </dl>
    

Pagination

Moving between pages has become less common with the advent of longer pages and AJAX loading, but it can still be useful for long repetitive listings or content. You can also create centered pagination by using the class .pagination-centered on its parent div.

  • 
    <ul class="pagination">
      <li class="arrow unavailable"><a href="">&laquo;</a></li>
      <li class="current"><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
      <li><a href="">4</a></li>
      <li class="unavailable"><a href="">&hellip;</a></li>
      <li><a href="">12</a></li>
      <li><a href="">13</a></li>
      <li class="arrow"><a href="">&raquo;</a></li>
    </ul>
    

Breadcrumbs

Walking through a linear flow, or want to show where someone is in the hierarchy? Breadcrumbs are totally boss. Breadcrumbs are built with a UL just like pagination, and they can support span or anchor elements with current and unavailable classes.


  • 
    <ul class="breadcrumbs">
      <li><a href="#">Home</a></li>
      <li><a href="#">Features</a></li>
      <li class="unavailable"><a href="#">Gene Splicing</a></li>
      <li class="current"><a href="#">Home</a></li>
    </ul>
    
    <ul class="breadcrumbs">
      <li><span>Home</span></li>
      <li><span>Features</span></li>
      <li><span>Gene Splicing</span></li>
      <li class="current"><span>Home</span></li>
    </ul>
    

Totally Tabular, Dude

Foundation has your back when it comes to separating content logically on the page. With our simple tabs you'll get going in no time.
Learn about our tabs »

Grab the copy of Foundation best for you, whether that's Scss or CSS, everything or just bits and pieces.

Install Foundation

Awesome product jobs:
via ZURBjobs