--- layout: documentation doc-tab: components doc-subtab: pagination variables: - name: $pagination-color value: $grey-darker - name: $pagination-background value: $white - name: $pagination-border-color value: $grey-lighter - name: $pagination-margin value: -0.25rem - name: $pagination-hover-color value: $link-hover - name: $pagination-hover-border-color value: $link-hover-border - name: $pagination-focus-color value: $link-focus - name: $pagination-focus-border-color value: $link-focus-border - name: $pagination-active-color value: $link-active - name: $pagination-active-border-color value: $link-active-border - name: $pagination-disabled-color value: $grey - name: $pagination-disabled-background-color value: $grey-lighter - name: $pagination-disabled-border-color value: $grey-lighter - name: $pagination-current-color value: $link-invert - name: $pagination-current-background-color value: $link - name: $pagination-current-border-color value: $link - name: $pagination-ellipsis-color value: $grey-light - name: $pagination-shadow-inset value: inset 0 1px 2px rgba($black, 0 --- {% capture pagination_example %} {% endcapture %} {% capture pagination_options_example %} {% endcapture %} {% capture pagination_centered_example %} {% endcapture %} {% capture pagination_right_example %} {% endcapture %} {% capture pagination_small_example %} {% endcapture %} {% capture pagination_medium_example %} {% endcapture %} {% capture pagination_large_example %} {% endcapture %} {% include subnav-components.html %}

Pagination

A responsive, usable, and flexible pagination

{% include meta.html colors=false sizes=true variables=true %}

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.

{{pagination_example}}
{% highlight html %}{{pagination_example}}{% endhighlight %}

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

{{pagination_options_example}}
{% highlight html %}{{pagination_options_example}}{% endhighlight %}

By default, 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.

{{pagination_centered_example}}
{% highlight html %}{{pagination_centered_example}}{% endhighlight %}
{{pagination_right_example}}
{% highlight html %}{{pagination_right_example}}{% endhighlight %}

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.

{{pagination_small_example}}
{{pagination_medium_example}}
{{pagination_large_example}}
{% include variables.html %}