Pagination

Pagination is a type of navigation that lets users tap through a series of related pages. Moving between pages has become less common with the advent of longer pages and AJAX loading, but if you need pagination, Foundation has you covered.



Basic

Add a .pagination class to a ul to get started, then add list items with links in them.

  • Create arrows by adding an .arrow class to the first and last list items.
  • To mark the current page, add a .current class to a list item.
  • Add a class of .unavailable to a list item to make it not clickable, like for the ellipsis in the middle.

HTML

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

Rendered HTML


Advanced

Wrap your ul.pagination with an element that has the .pagination-centered class to center your pagination.

HTML

<div class="pagination-centered"> <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> </div>

Rendered HTML


Customize With Sass

Pagination styles can be easily customized with the Sass variables provided in the _settings.scss file.

SCSS

$include-html-nav-classes: $include-html-classes; // We use these to control the pagination container $pagination-height: rem-calc(24); $pagination-margin: rem-calc(-5); // We use these to set the list-item properties $pagination-li-float: $default-float; $pagination-li-height: rem-calc(24); $pagination-li-font-color: #222; $pagination-li-font-size: rem-calc(14); $pagination-li-margin: rem-calc(5); // We use these for the pagination anchor links $pagination-link-pad: rem-calc(1 7 1); $pagination-link-font-color: #999; $pagination-link-active-bg: scale-color(#fff, $lightness: -10%); // We use these for disabled anchor links $pagination-link-unavailable-cursor: default; $pagination-link-unavailable-font-color: #999; $pagination-link-unavailable-bg-active: transparent; // We use these for currently selected anchor links $pagination-link-current-background: $primary-color; $pagination-link-current-font-color: #fff; $pagination-link-current-font-weight: bold; $pagination-link-current-cursor: default; $pagination-link-current-active-bg: $primary-color;

Semantic Markup With Sass

You can apply pagination styles to semantic markup using Sass mixins.

Basic

You can use the pagination() mixin to create your own pagination element, like so:

SCSS

.your-class-name { @include pagination; }

HTML

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

Advanced

You can center your pagination by wrapping your pagination element in another container that is styled with the pagination-container() mixin. To center your pagination within the container element, set the $centered option in your mixin to true.

SCSS

.container-class-name { @include pagination-container(true); } .your-class-name { @include pagination($centered, $base-styles); }

HTML

<div class="container-class-name"> <ul class="your-class-name"> <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> </div>

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/pagination";
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »