Pagination

A responsive, usable, and flexible pagination

The pagination component consists of several elements:

pagination-previous and pagination-next for incremental navigation
pagination-list which displays page items:
- pagination-link for the page numbers
- pagination-ellipsis for range separators

All elements are optional so you can compose your pagination as you wish.

Example

HTML

<nav class="pagination" role="navigation" aria-label="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li>
      <a class="pagination-link" aria-label="Goto page 1">1</a>
    </li>
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    <li>
      <a class="pagination-link" aria-label="Goto page 45">45</a>
    </li>
    <li>
      <a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
    </li>
    <li>
      <a class="pagination-link" aria-label="Goto page 47">47</a>
    </li>
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    <li>
      <a class="pagination-link" aria-label="Goto page 86">86</a>
    </li>
  </ul>
</nav>

You can disable some links if they are not active, or change the amount of page numbers available.

Example

HTML

<nav class="pagination" role="navigation" aria-label="pagination">
  <a class="pagination-previous" title="This is the first page" disabled>Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li>
      <a class="pagination-link is-current" aria-label="Page 1" aria-current="page">1</a>
    </li>
    <li>
      <a class="pagination-link" aria-label="Goto page 2">2</a>
    </li>
    <li>
      <a class="pagination-link" aria-label="Goto page 3">3</a>
    </li>
  </ul>
</nav>

By default on tablet, the list is located on the left, and the previous/next buttons on the right. But you can change the order of these elements by using the is-centered and is-right modifiers.

Example

HTML

<nav class="pagination is-centered" role="navigation" aria-label="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
    <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

Example

HTML

<nav class="pagination is-right" role="navigation" aria-label="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
    <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

Styles #

Add the is-rounded modifier to have rounded pagination items.

Example

HTML

<nav class="pagination is-rounded" role="navigation" aria-label="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
    <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

Sizes #

The pagination comes in 3 additional sizes.
You only need to append the modifier is-small, is-medium, or is-large to the pagination component.

Example

HTML

<nav class="pagination is-small" role="navigation" aria-label="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
    <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

Example

HTML

<nav class="pagination is-medium" role="navigation" aria-label="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
    <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

Example

HTML

<nav class="pagination is-large" role="navigation" aria-label="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next page</a>
  <ul class="pagination-list">
    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
    <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
    <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
    <li><span class="pagination-ellipsis">&hellip;</span></li>
    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
  </ul>
</nav>

Variables #

Name

Type

Value

Computed Value

Computed Type

$pagination-color

variable

$text-strong

hsl(0, 0%, 21%)

color

$pagination-border-color

variable

$border

hsl(0, 0%, 86%)

color

$pagination-margin

size

-0.25rem

$pagination-min-width

variable

$control-height

$pagination-item-font-size

size

1em

$pagination-item-margin

size

0.25rem

$pagination-item-padding-left

size

0.5em

$pagination-item-padding-right

size

0.5em

$pagination-nav-padding-left

size

0.75em

$pagination-nav-padding-right

size

0.75em

$pagination-hover-color

variable

$link-hover

hsl(0, 0%, 21%)

color

$pagination-hover-border-color

variable

$link-hover-border

hsl(0, 0%, 71%)

color

$pagination-focus-color

variable

$link-focus

hsl(0, 0%, 21%)

color

$pagination-focus-border-color

variable

$link-focus-border

hsl(229, 53%,  53%)

color

$pagination-active-color

variable

$link-active

hsl(0, 0%, 21%)

color

$pagination-active-border-color

variable

$link-active-border

hsl(0, 0%, 29%)

color

$pagination-disabled-color

variable

$text-light

hsl(0, 0%, 48%)

color

$pagination-disabled-background-color

variable

$border

hsl(0, 0%, 86%)

color

$pagination-disabled-border-color

variable

$border

hsl(0, 0%, 86%)

color

$pagination-current-color

variable

$link-invert

#fff

color

$pagination-current-background-color

variable

$link

hsl(229, 53%,  53%)

color

$pagination-current-border-color

variable

$link

hsl(229, 53%,  53%)

color

$pagination-ellipsis-color

variable

$grey-light

hsl(0, 0%, 71%)

color

$pagination-shadow-inset

size

inset 0 1px 2px rgba($scheme-invert, 0.2)

This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

Pagination

Styles #

Sizes #

Variables #

Support Bulma 😃

Newsletter Features, releases, showcase… stay in the loop!