Easily create a nice looking pagination to navigate through pages.
The Pagination component consists of button-like styled links, that are aligned side by side in a horizontal list.
| Class | Description |
|---|---|
.uk-pgn | Add this class to a <ul> element to define the Pagination component. Use <a> elements as pagination items within the list. |
.uk-active | Add this class to a list item to apply an active state and use a <span> instead of an <a> element. |
.uk-disabled | Add this class to a list item to apply a disabled state and use a <span> instead of an <a> element. |
To add an icon, just add the data-uk-pgn-previous or data-uk-pgn-next attribute to a <span> element inside a pagination item.
There are several style modifiers available. Just add one of the following classes to apply a different look.
| Class | Description |
|---|---|
.uk-pgn-default | Adds the default style. |
.uk-pgn-primary | Adds a primary style. |
.uk-pgn-secondary | Adds a secondary style. |
.uk-pgn-destructive | Adds a destructive style. |
.uk-pgn-ghost | Adds a ghost style. |
There are several size modifiers available. Just add one of the following classes to make the pagination smaller or larger.
| Class | Description |
|---|---|
.uk-pgn-xs | Applies extra small size. |
.uk-pgn-sm | Applies small size. |
.uk-pgn-md | Applies medium size. |
.uk-pgn-lg | Applies large size. |
The Pagination component utilizes flexbox, so navigations can easily be aligned with Flex utility classes from Tailwind CSS.
The previous/next pagination adheres to the button pattern and automatically sets the appropriate WAI-ARIA roles, states and properties.
button role and the aria-label property.The Pagination component uses the following translation strings. Learn more about translating components.
| Key | Default | Description |
|---|---|---|
label | Next/Previous page | aria-label attribute. |