UIkit Pagination

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

Try it now

Source Code

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

Try it now

Source Code

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

Try it now

Source Code

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

  • 1
  • ...
  • 7

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

The above source code result will be:

  • 1
  • ...
  • 7