Pagination

Responsive and flexible content pagination

You can create a pagination element with the pagination class and a single child ul tag.

<nav class="pagination">
  <ul>
    <li><a href="#">Previous</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><a href="#">Next</a></li>
  </ul>
</nav>
Copy

Controls

Active

The is-active modifier can be used to signify the currently active page.

<nav class="pagination">
  <ul>
    <li><a href="#">Previous</a></li>
    <li><a href="#">1</a></li>
    <li class="is-active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>
Copy

Disabled

The is-disabled modifier can be used to grey out an item in the pagination.

<nav class="pagination">
  <ul>
    <li><a href="#">Previous</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 class="is-active"><a href="#">5</a></li>
    <li class="is-disabled"><a href="#">Next</a></li>
  </ul>
</nav>
Copy

Alignment

Center alignment

The has-centered modifier will position all of the content to the center of the pagination container.

<nav class="pagination has-centered">
  <ul>
    <li><a href="#">Previous</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><a href="#">Next</a></li>
  </ul>
</nav>
Copy

Use the is-center modifier if you only want to center-align the ul element. This can be useful if you have custom content within the pagination flexbox container.

Right alignment

The has-end modifier will align the contents from right to left.

<nav class="pagination has-end">
  <ul>
    <li><a href="#">Previous</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><a href="#">Next</a></li>
  </ul>
</nav>
Copy

Use the is-end modifier if you only want to right-align the ul element. This can be useful if you have custom content within the pagination flexbox container.

<nav class="pagination">
  <span>Showing 1 to 10 of 200 entries</span>
  <ul class="is-end">
    <li><a href="#">Previous</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><a href="#">Next</a></li>
  </ul>
</nav>
Copy

Style

Border

You can add a border to each of the list items with the has-border modifier.

<nav class="pagination has-border">
  <ul>
    <li><a href="#">1</a></li>
    <li class="is-active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</nav>
Copy

Round

Round each of the list items with the has-round modifier.

<nav class="pagination has-round">
  <ul>
    <li><a href="#">1</a></li>
    <li class="is-active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</nav>
Copy

Both the has-border and has-round modifiers can be used together.

CSS variables

You can customize the pagination element using the following CSS variables.

.pagination {
  --background-color: transparent;
  --font-color: var(--color-black);
  --border-color: transparent;
  --border-width: 1px;
  --border-radius: 0;
  --font-size: 0.875rem;
  --line-height: 1.5;
  --margin: 0.125rem;
  --padding: 0.375rem 0.75rem;
  --disabled-opacity: 0.5;
  --hover-background-color: var(--color-light);
  --hover-font-color: var(--color-black);
  --hover-border-color: transparent;
  --active-background-color: var(--color-primary);
  --active-font-color: var(--color-primary-text);
  --active-border-color: transparent;
}

/* Pagination element with the has-border modifier. */
.pagination.has-border {
  --background-color: var(--color-white);
  --font-color: var(--color-black);
  --border-color: var(--color-light-grey);
  --border-radius: 4px;
  --hover-background-color: var(--color-white);
  --hover-font-color: var(--color-black);
  --hover-border-color: var(--color-light-grey-darker);
  --active-background-color: var(--color-primary);
  --active-font-color: var(--color-primary-text);
  --active-border-color: var(--color-primary);
}

/* Pagination elements with the has-round modifier. */
.pagination.has-round {
  --margin: 0.25rem;
  --border-radius: 50px;
}
Copy

Sass variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.