UIkit Pagination

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

• 1
• 2
• 3
• 4
• 4
• 5
• 6
• 7
• 8
• 9
• 10

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

• 1
• 2
• 3
• 4

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

• Previous
• 1
• 2
• 3
• 4
• Next

Pagination Component Alignment

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

Example

• 1
• ...
• 7