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 %}