Pagination

Easily create a nice looking pagination to navigate through pages.

Usage

The Pagination component consists of button-like styled links, that are aligned side by side in a horizontal list.

ClassDescription
.uk-paginationAdd this class to a <ul> element to define the Pagination component. Use <a> elements as pagination items within the list.
.uk-activeAdd this class to a list item to apply an active state and use a <span> instead of an <a> element.
.uk-disabledAdd 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>
Copy to clipboard
  • <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>

Alignment

The Pagination component utilizes flexbox, so navigations can easily be aligned with the Flex component.

<ul class="uk-pagination justify-center">
  ...
</ul>
Copy to clipboard
  • <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>

Previous and next

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>
Copy to clipboard
  • <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>

Accessibility

The previous/next pagination adheres to the button pattern and automatically sets the appropriate WAI-ARIA roles, states and properties.

  • The prev/next pagination items have the button role and the aria-label property.

Internationalization

The Pagination component uses the following translation strings. Learn more about translating components.

KeyDefaultDescription
labelNext/Previous pagearia-label attribute.

Theme development

On your tailwind.config.js file, add the Pagination component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        pagination: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected 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*