Foundation for Beginners: Navigation

One of the most important aspects of a front-end framework is how it handles navigation. In this part of Foundation for Beginners, we'll take a look at several forms of navigation, along with some JavaScript tools which add extra flourish. I’ll also introduce you to another helpful tool which will help you to become a better Foundation developer.

The Section Plugin

One of Foundation's best JavaScript offerings comes in the form of Section; a plugin for building several forms of navigation, such as accordions, tabs, vertical and horizontal navigation.

Here's some example markup:

<div class="section-container auto" data-section>
  <section>
    <p class="title" data-section-title><a href="#">Section 1</a></p>
    <div class="content" data-section-content>
      <p>Content of section 1.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#">Section 2</a></p>
    <div class="content" data-section-content>
      <p>Content of section 2.</p>
    </div>
  </section>
</div>

This may look a bit more complex than what we've previously covered, so let me break it down for you.

Any section you create, no matter whether it's an accordion, or tabs, or even a nav bar, starts with a div using the section-container class followed by the auto class. On that same div add an empty data-section attribute. This attribute dictates what kind of section we're dealing with, by default Foundation assumes we want an accordion. To use a particular type of section, simply change the auto class to tabs, accordion, vertical-nav or horizontal-nav. Finally, add that very same class as the data-section attribute's value. This will ensure you are displaying the correct type of section for your needs.

Once the wrapper has been setup, we can add some content. For every section in your wrapper you will need a title and to link that title to the content:

<section>
    <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
    <div class="content" data-section-content>
      <p>Content of section 1.</p>
    </div>
</section>

We can see here that each section is wrapped in a <section> tag (which makes things easy, although you could use a div). Inside each of these sections we have a <p> tag with a class of title which encloses the link to the corresponding section. Below the paragraph tag is the div which holds the content for the section; this has a class of content. Duplicating the code above will create each of your sections inside your section wrapper.

Note: Adding the vertical-nav class will display a vertical navigation on large screens, but will switch to an accordion when on small screens. Adding horizontal-nav will evoke the same behavior.

Deep Linking

Let’s say you want to link to the second section of your section wrapper, but when you open the page it shows the first section by default. Fear not! Foundation has a built in solution in the form of Deep Linking. To get this to work we need to add a new attribute to our wrapper: data-options=”deep_linking:true”. This tells Foundation that when a user visits a url with a fragment identifier such as this “http://www.website.com/#section3”, it should load the page with that section showing.

<div class="section-container auto" data-section data-options="deep_linking: true">
  <section>
    <p class="title" data-section-title><a href="#section1">Section 1</a></p>
    <div class="content" data-slug="section1" data-section-content>
      <p>Content of section 1.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#section2">Section 2</a></p>
    <div class="content" data-slug="section2" data-section-content>
      <p>Content of section 2.</p>
    </div>
  </section>
</div>

As you can see, we have added the deep linking data option and also added the data-slug attribute to the content div. This data slug instructs Foundation which section to display on page load.

Side Nav

Foundation's Side Nav (a simple way to display vertical menus) goes hand in hand with sections. The HTML structure is very simple and allows for dividers where necessary. Let’s look at the markup.

<ul class="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>

This is a standard unordered list, comprising list items containing links to.. well whatever you want. Adding the side-nav class to the <ul> sets everything up, whilst the active class can be used to show which link is currently in use. If you need to divide up your list items, add an empty list item with a class of divider. Easy.

Sub Nav

Foundation's Sub Nav tends to be used for things such as filtering content. The markup is as straight-forward as Side Nav, but differs in that it uses a description list instead of an unordered list. This gives you the option of using a term along with your description tags which hold your links. There are no dividers in the Sub Nav but you can still make use of the active class. Here’s the markup:

<dl class="sub-nav">
  <dt>Filter:</dt>
  <dd class="active"><a href="#">All</a></dd>
  <dd><a href="#">Photos</a></dd>
  <dd><a href="#">Videos</a></dd>
  <dd><a href="#">Music</a></dd>
</dl>

Pagination

Pagination is also a form of navigation; in fact, pagination should really be contained within a <nav> element. Let's have a look at the markup of some pagination links in Foundation:

<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>

Kicking your list items off should be an arrow, which requires the class arrow. You may want to use either « or &lsaquo; or maybe even ←. Take a look at unicode-table.com for more examples you could use.

The Pagination navigation type allows us to state classes unavailable and current, with the latter being very similar to the active class that we went over previously. You may also want to add an arrow to your last list item, this time using either » or &rsaquo;, or maybe even →.

As this is simple markup adding it to a content management system such as Wordpress is fairly easy.

Bonus: You could center the Pagination by wrapping the ul tag in a nav with the pagination-centered class. As with all Foundation elements, pagination is responsive and easy to style.

Useful Tool

Using a responsive framework such as Foundation is a rapid way to get your project looking great on all devices, but testing is still a chore. To ease that pain I've create a tool called Respondr, allowing you to add a url to a smartphone, tablet and desktop giving you the chance to catch any issues quickly and easily.

Coming up Next

So far we've covered the grid system, block grids, the Orbit slider plugin, the section plugin and three types of navigation. Next time we’ll focus on the Top Bar plugin, breadcrumbs and yet another useful tool.