December 12, 2017

UIkit Pagination

UIkit Pagination Pagination component allows us to create beautiful pagination. Class uk-pagination is used to create pagination in UIkit. Here in this article we are going to explain how to create pagination in UIkit.

UIkit Pagination Example

Pagination basically provides navigation links in button style that are horizontally aligned. Let us create very first navigation link.

Example:

<ul class="uk-pagination" uk-margin>
    <li><a href="#"><span uk-pagination-previous></span></a></li>
    <li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">4</a></li>
	<li  class="uk-active"><span>5</span></li>
	<li><a href="#">6</a></li>
	<li><a href="#">7</a></li>
	<li><a href="#">8</a></li>
	<li><a href="#">9</a></li>
	<li><a href="#">10</a></li>
    <li><a href="#"><span uk-pagination-next></span></a></li>
</ul>

Try it »

If you run the above example it will produce output something like this-

Active & Disabled Links

uk-active– Add this class to show the active state.
uk-disabled– Add this class to show disabled state.

Syntax

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

Previous & Next Button

Class uk-pagination-previous is used to create previous button and uk-pagination-next is used to create next button in UIkit Pagination.