Basic Steps To Create Pagination Component
Add .uk-pagination
class to the <ul>
element base class to define pagination component. Use <a>
element as a pagination items.
UIkit pagination component is used to create pagination navigation to navigate through the pages.
Add .uk-pagination
class to the <ul>
element base class to define pagination component. Use <a>
element as a pagination items.
General Syntax
<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="#"><span uk-pagination-next></span></a>
</li>
</ul>
Source Code
<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="#"><span uk-pagination-next></span></a>
</li>
</ul>
Source Code: Output
The above source code result will be:
.uk-active
class to the list item i.e <li>
and replace <a>
with <span>
element..uk-disabled
class to the list item i.e <li>
and replace <a>
with <span>
element.General Syntax
<ul class="uk-pagination" uk-margin>
<li class="uk-active"><span>2</span></li>
<li class="uk-disabled"><span>3</span></li>
</ul>
Source Code
<ul class="uk-pagination" uk-margin>
<li>
<a href="#"> <span uk-pagination-previous></span></a>
</li>
<li><a href="#">1</a></li>
<li class="uk-active"><span>2</span></li>
<li class="uk-disabled"><span>3</span></li>
<li><a href="#">4</a></li>
<li>
<a href="#"><span uk-pagination-next></span></a>
</li>
</ul>
Source Code: Output
The above source code result will be:
To create a previous button add uk-pagination-previous
attribute to the <span>
element and to create next button, add uk-pagination-next
attribute to the <span>
element inside a pagination item.
General Syntax
<ul class="uk-pagination">
<li>
<a href=""><span uk-pagination-previous></span></a>
</li>
<li>
<a href=""><span uk-pagination-next></span></a>
</li>
</ul>
Source Code
<ul class="uk-pagination" uk-margin>
<li>
<a href="#"><span class="uk-margin-small-right" uk-pagination-previous></span> Previous</a>
</li>
<li><a href="#">1</a></li>
<li class="uk-active"><span>2</span></li>
<li class="uk-disabled"><span>3</span></li>
<li><a href="#">4</a></li>
<li>
<a href="#">Next <span class="uk-margin-small-left" uk-pagination-next></span></a>
</li>
</ul>
Source Code: Output
The above source code result will be:
The pagination component can be aligned left, right, or center using flexbox utility classes.
General Syntax
<ul class="uk-pagination uk-flex-center"></ul>
<ul class="uk-pagination uk-flex-right"></ul>
Source Code
<ul class="uk-pagination uk-flex-center" uk-margin>
<li>
<a href="#"><span uk-pagination-previous></span></a>
</li>
<li><a href="#">1</a></li>
<li class="uk-disabled"><span>...</span></li>
<li class="uk-active"><span>7</span></li>
<li>
<a href="#"><span uk-pagination-next></span></a>
</li>
</ul>
Source Code: Output
The above source code result will be: