We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.
The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.
Easily create a nice looking pagination to navigate through pages.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js file, add the Pagination
component within the ui() plugin.
import ui from "franken-ui";
ui({
components: {
pagination: {
hooks: {}
}
}
}),The Pagination component consists of button-like styled links, that are aligned side by side in a horizontal list.
| Class | Description |
|---|---|
.uk-pagination | 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. |
<ul class="uk-pagination">
<li><a href=""></a></li>
<li class="uk-active"><span></span></li>
<li class="uk-disabled"><span></span></li>
</ul><nav aria-label="Pagination">
<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-disabled"><span>…</span></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li class="uk-active"><span aria-current="page">7</span></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li class="uk-disabled"><span>…</span></li>
<li><a href="#">20</a></li>
<li>
<a href="#"><span uk-pagination-next></span></a>
</li>
</ul>
</nav>The Pagination component utilizes flexbox, so navigations can easily be aligned with the Flex component.
<ul class="uk-pagination justify-center">
...
</ul><nav aria-label="Pagination">
<ul class="uk-flex-center uk-pagination" 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><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li class="uk-active"><span aria-current="page">7</span></li>
<li><a href="#">8</a></li>
<li>
<a href="#"><span uk-pagination-next></span></a>
</li>
</ul>
</nav>
<nav aria-label="Pagination">
<ul class="uk-flex-right uk-margin-medium-top uk-pagination" 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><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li class="uk-active"><span aria-current="page">7</span></li>
<li><a href="#">8</a></li>
<li>
<a href="#"><span uk-pagination-next></span></a>
</li>
</ul>
</nav>To apply a previous and next button, add the uk-pagination-previous or uk-pagination-next attribute to a <span> element inside a pagination item.
<ul class="uk-pagination justify-between">
<li>
<a href=""><span uk-pagination-previous></span></a>
</li>
<li>
<a href=""><span uk-pagination-next></span></a>
</li>
</ul><nav>
<ul class="uk-pagination">
<li>
<a class="uk-padding-small" href="#"
><span class="uk-margin-small-right" uk-pagination-previous></span>
Previous</a
>
</li>
<li class="uk-margin-auto-left">
<a class="uk-padding-small" href="#"
>Next <span class="uk-margin-small-left" uk-pagination-next></span
></a>
</li>
</ul>
</nav>Learn more about using hooks.
| Hook Name | Affected Classes |
|---|---|
hook-pagination | .uk-pagination |
hook-item | .uk-pagination > * > * |
hook-item-hover | .uk-pagination > * > :hover |
hook-item-active | .uk-pagination > .uk-active > * |
hook-item-disabled | .uk-pagination > .uk-disabled > * |
hook-misc | * |
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. |