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

Accessibility

Use this snippet to make Pagination more accessible. Adding the role attribute gives context to a screen reader. The aria-label attribute will allow a screen reader to call out what the component is to the user. Using the Tab button, a user can navigate until they've reached the link below. (Use Shift+Tab to navigate back one step.)

If you are using an unavailable link, give it an aria-disabled attribute as in this example:

<ul class="pagination" role="menubar" aria-label="Pagination">
  <li class="arrow unavailable" aria-disabled="true"><a href="">&laquo; Previous</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" aria-disabled="true"><a href="">&hellip;</a></li>
  <li><a href="">12</a></li>
  <li><a href="">13</a></li>
  <li class="arrow"><a href="">Next &raquo;</a></li>
</ul>

This component still needs keyboard accessibility through arrow keys. Stay tuned for updates in future releases.

Note: It is bad practice to leave links that do not go anywhere on your live site. Use something like foo.html to fill them as you build.

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