--- title: Pagination subtitle: "A responsive, usable, and flexible pagination" layout: documentation doc-tab: components doc-subtab: pagination breadcrumb: - home - documentation - components - components-pagination meta: colors: false sizes: true variables: true --- {% capture pagination_example %} {% endcapture %} {% capture pagination_options_example %} {% endcapture %} {% capture pagination_centered_example %} {% endcapture %} {% capture pagination_right_example %} {% endcapture %} {% capture pagination_rounded_example %} {% endcapture %} {% capture pagination_small_example %} {% endcapture %} {% capture pagination_medium_example %} {% endcapture %} {% capture pagination_large_example %} {% endcapture %}

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.

{% include snippet.html content=pagination_example horizontal=true more=true %}

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

{% include snippet.html content=pagination_options_example horizontal=true more=true %}

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.

{% include snippet.html content=pagination_centered_example horizontal=true more=true %} {% include snippet.html content=pagination_right_example horizontal=true more=true %} {% include anchor.html name="Styles" %} {% include elements/new-tag.html version="0.6.2" %}

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

{% include snippet.html content=pagination_rounded_example horizontal=true more=true %} {% include anchor.html name="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.

{% include snippet.html content=pagination_small_example horizontal=true more=true %} {% include snippet.html content=pagination_medium_example horizontal=true more=true %} {% include snippet.html content=pagination_large_example horizontal=true more=true %} {% include variables.html type='component' %}