Pagination

Pagination

Easlily create a nicely looking pagination to navigate through pages.

Usage

The Pagination component consists of button-like styled links, that are aligned side by side.

Class Description
.uk-pagination Add this class to a <ul> element to define the Pagination component. Use <a> elements as pagination items within the list.
.uk-active Add this class to a list item to apply an active state and use a <span> instead of an <a> element.
.uk-disabled Add this class to a list item to apply a disabled state and use a <span> instead of an <a> element.

To apply an ellipsis without any styling, just use a <span> element instead of an <a> element.

Example

Markup

<ul class="uk-pagination">
    <li><a href="">...</a></li>
    <li class="uk-active"><span>...</span></li>
    <li class="uk-disabled"><span>...</span></li>
    <li><span>...</span></li>
</ul>

Alignment modifiers

Add the .uk-pagination-left or .uk-pagination-right class to the pagination to align it left or right.

Example

Markup

<ul class="uk-pagination uk-pagination-left">
    <li>...</li>
</ul>

<ul class="uk-pagination uk-pagination-right">
    <li>...</li>
</ul>


Previous and next

Creating a simple previous and next pagination is very easy. Just add the .uk-pagination-previous or .uk-pagination-next class to a <li> element to align previous and next buttons left or right.

Example

Markup

<li class="uk-pagination-previous"><a href="">...</a></li>
<li class="uk-pagination-next"><a href="">...</a></li>

Pagination with icons

Enhance your pagination with icons from the Icon component by adding one of the .uk-icon-* classes to an <i> or <span> element within a pagination link.

Example

Markup

<li><a href=""><i class="uk-icon-angle-double-left"></i></a></li>
<li><a href=""><i class="uk-icon-angle-double-right"></i></a></li>

JavaScript

You can apply the additional Dynamic Pagination component to automatically calculate the pages, for example to trigger an event to load new items dynamically in Ajax powered list views.

Seguici