UIkit Pagination

UIkit pagination component is used to create pagination navigation to navigate through the pages.

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.

Example

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>

Try it now

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>

Try it now

Source Code : Output

The above source code result will be:

Pagination:Active & Disabled Links

Step 1:To create active pagination link ,simply add .uk-active class to the list item i.e <li> and replace <a> with <span> element.
Step 2:To create disabled pagination link ,simply add .uk-disabled class to the list item i.e <li> and replace <a> with <span> element.

Example

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>

Try it now

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>

Try it now

Source Code : Output

The above source code result will be:

UIkit Pagination Previous and next

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.

Example

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>

Try it now

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>

Try it now

Source Code : Output

The above source code result will be:

Pagination Component Alignment

The pagination component can be aligned left, right, or center using flexbox utility classes.

Example

General Syntax

      <ul class="uk-pagination uk-flex-center"></ul>
<ul class="uk-pagination uk-flex-right"></ul>

Try it now

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>

Try it now

Source Code : Output

The above source code result will be:

UIkit Pagination

Basic Steps To Create Pagination Component

Example

Pagination:Active & Disabled Links

Example

UIkit Pagination Previous and next

Example

Pagination Component Alignment

Example

Web Tutorials