❮ Foundation Grid Block Foundation Grid Examples ❯

Pagination Foundation

If your webpage has a lot of content, you need to use the pagination feature.

To create a basic pagination feature, add the .pagination class to the <ul> element:

Example

<ul class="pagination">  <li><a href="#">1</a></li>  
    <li><a href="#">2</a></li>  <li><a href="#">3</a></li>  
    <li><a href="#">4</a></li>  <li><a href="#">5</a></li></ul>

Current Page

You can mark the current page by adding the .current class to the <li>:

Example

<ul class="pagination">  <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><a href="#">5</a></li></ul>

Disabled Pagination

To make a pagination item unclickable, use the .unavailable class:

Example

<ul class="pagination">  <li><a href="#">1</a></li>  
    <li><a href="#">2</a></li>  <li class="unavailable"><a href="#">3</a></li>  
    <li><a href="#">4</a></li>  <li><a href="#">5</a></li></ul>

Pagination Direction

Add the .arrow class to the first and last <li> elements to insert HTML entity symbols:

Example

<ul class="pagination">  <li class="arrow"><a href="#">&laquo;</a></li>  
    <li><a href="#">1</a></li>  <li><a href="#">2</a></li>  
    <li><a href="#">3</a></li>  <li><a href="#">4</a></li>  
    <li><a href="#">5</a></li>  <li class="arrow"><a href="#">&raquo;</a></li>
    </ul>

Centered Pagination

You can center the pagination by wrapping the <ul> with a <div> element and adding the .pagination-centered class to the <div>:

Example

<div class="pagination-centered">  <ul class="pagination">    <li class="arrow"><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><a href="#">5</a></li>    <li class="arrow"><a href="#">&raquo;</a></li>
     
    </ul></div>

Breadcrumbs

Breadcrumbs are used to display the navigation structure of the current page.

Add the .breadcrumbs class to the <ul> element to create breadcrumbs. You can add the .current or .unavailable class to <li> to set the current page and unclickable effects:

Example

<ul class="breadcrumbs">  <li><a href="#">Home</a></li>  
    <li><a href="#">Private</a></li>  <li
    class="unavailable"><a href="#">Pictures</a></li>  
    <li class="current">Vacation</li> </ul>

Sub Nav

Sub nav is very useful for page switching.

Add the .sub-nav class to the <dl> element to create a sub nav. Add titles on the <dt> element and add the .active class to the selected <dd>:

Example

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

❮ Foundation Grid Block Foundation Grid Examples ❯