Pagination links simply allow users to surf through your content. A valid alternative is infinite scrolling, although it has strengths and weaknesses to be aware of.

I know frameworks like Bootstrap let you create a pagination in seconds, however 1) not everybody uses frameworks or can use them for every project and 2) I created a snippet a bit more easy to customize, with a preset of time-saving CSS classes.

👋 A new version of this component is available. Download now →.

Creating the structure

The HTML structure is the same for each pagination example: a <nav> element that wraps an unordered list (.cd-pagination). The list items containing the previous and next links have the .button class. The optional ready-to-use classes have to be applied to the <ul> element (.no-space class in the example below).

<nav role="navigation">
   <ul class="cd-pagination no-space">
      <li class="button"><a href="#0">Prev</a></li>
      <li><a href="#0">1</a></li>
      <li><a href="#0">2</a></li>
      <li><a class="current" href="#0">3</a></li>
      <li><a href="#0">4</a></li>
      <li><span>...</span></li>
      <li><a href="#0">20</a></li>
      <li class="button"><a href="#0">Next</a></li>
   </ul>
</nav> <!-- cd-pagination-wrapper -->

Adding style

The easiest way to modify the "theme" is through Sass, where you can take advantage of variables. Here is the partials > _variables.scss file:

// colors

$color-1: #2E4057; // Pickled Bluewood
$color-2: #64a281; // Aqua Forest
$color-3: #ffffff; // White

// fonts 

$primary-font: 'PT Sans', sans-serif;

// border-radius

$border-radius: .25em;

By changing the color variables, you can create infinite theme variations. If Sass is not your cup of tea, just jump into the style.css file and update the colors from there.

The snippet comes with a set of (optional) classes that change the pagination style. All these classes are applied to the <ul> element. The class .cd-pagination is the one that gives the basic style, therefore it shouldn't be removed.

The easiest way to check what these classes are and do, is to check the source file and the demo that comes with it. Here is an example from the style.css file (class .custom-icons).

/* -------------------------------- 

custom icons - customize the small arrow inside the next and prev buttons 

-------------------------------- */

.cd-pagination.custom-icons .button a {
  position: relative;
}
.cd-pagination.custom-icons .button:first-of-type a {
  padding-left: 2.4em;
}
.cd-pagination.custom-icons .button:last-of-type a {
  padding-right: 2.4em;
}
.cd-pagination.custom-icons .button:first-of-type a::before,
.cd-pagination.custom-icons .button:last-of-type a::after {
  content: '';
  position: absolute;
  display: inline-block;
  /* set size for custom icons */
  width: 16px;
  height: 16px;
  top: 50%;
  /* set margin-top = icon height/2 */
  margin-top: -8px;
  background: transparent url("../img/cd-icon-arrow-1.svg") no-repeat center center;
}
.cd-pagination.custom-icons .button:first-of-type a::before {
  left: .8em;
}
.cd-pagination.custom-icons .button:last-of-type a::after {
  right: .8em;
  transform: rotate(180deg);
}

Just some guidelines:

• On small devices we remove the "numbers" and show only the previous and next links.
• The class .disabled can be added to an <a> element to disable it.
• The class .current is used to highlight the current page (number).
• The class .animated-buttons works only if combined with .custom-icons. Besides the text inside the <a> element must be wrapped into a <i> element.

How to remove the space between inline-block elements

Here's a handy trick! When you set the display of list items to inline-block, because you want to align them horizontally, you'll notice a default margin. Setting margin: 0; won't fix it.

Your options are:

1. Setting a negative margin for the list items (not a fan of this solution).
2. Let them float (i.e. float: left; applied to each <li> element); just remember to apply the clearfix hack to the <ul> element or its parent.
3. Removing the closing </li> tags from the HTML. It may sounds rude, but it's a nice trick to have up your sleeve. You can see it in action in Pagination number 4.

<nav role="navigation">
   <ul class="cd-pagination no-space move-buttons custom-icons">
      <li class="button"><a href="#0">Prev</a>
      <li><a href="#0">1</a>
      <li><a href="#0">2</a>
      <li><a class="current" href="#0">3</a>
      <li><a href="#0">4</a>
      <li><span>...</span>
      <li><a href="#0">20</a>
      <li class="button"><a href="#0">Next</a>
   </ul>
</nav> <!-- cd-pagination-wrapper -->