MUSIC ON

Navigation

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

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

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 »

Our Partners