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.

• «
• 1
• 2
• 3
• 4
• …
• 12
• 13
• »

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.

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

Advanced

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

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

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:

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

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