+1-202-555-0192 | 3487 Mill Road ,Syosset, NY 11791 Reservation

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.

+1-202-555-0192 3487 Mill Road, Syosset, NY 11791
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image