---
title: Pagination
desc: Navigation aid that divides content into discrete pages, allowing users to navigate through large sets of data.
ico: mdi:table-row
keywords:
  - nav

props:
  - class: .prs-pagination
    type: component
    desc: Container
  - class: .prs-pagination-pager
    type: part
    desc: Page navigation
  - class: .prs-pagination-pager_disabled
    type: state
    desc: Page navigation disabled

alert:
  ico: mdi:wheelchair-accessibility
  body: |
    **Note:**  
    Use **aria-current="true"** on the active page button to set that as the current active page. This ensures the proper accessibility and rewards you with the proper styles.
    Pay attention to the **aria-label** text for the current and non-current pages.
    Also, note how the appropriate pagers get disabled when the first and last pages are active.

preview: |
  <nav 
    class="prs-pagination" 
    role="navigation" 
    aria-label="Pagination"
    x-data="{
      totalPages: 5,
      currentPage: 1,

      goTo(page) {
        if (page < 1 || page > this.totalPages) return;
        this.currentPage = page;
      },
      prev() {
        if (this.currentPage > 1) {
          this.currentPage--;
        }
      },
      next() {
        if (this.currentPage < this.totalPages) {
          this.currentPage++;
        }
      }
    }"
  >
    <ul>
      <li class="prs-pagination-pager" :class="{ 'prs-pagination-pager_disabled': currentPage === 1 }">
        <a href="#" @click.prevent="prev()" aria-label="Previous Page">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img"><use href="/_assets/prs-icons.svg#chevron-left" /></svg>
        </a>
      </li>
      <template x-for="page in totalPages" :key="page" hidden>
        <li>
          <a 
            href="#" 
            @click.prevent="goTo(page)"
            :aria-label="'Go to Page '+ page"
            :aria-current="currentPage === page ? 'true' : false"
            :class="{ 'active': currentPage === page }"
          >
            <span x-text="page"></span>
          </a>
        </li>
      </template>
      <li class="prs-pagination-pager" :class="{ 'prs-pagination-pager_disabled': currentPage === totalPages }">
        <a href="#" @click.prevent="next()" aria-label="Next Page">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img"><use href="/_assets/prs-icons.svg#chevron-right" /></svg>
        </a>
      </li>
    </ul>
  </nav>

code:
  html: |
    <nav class="prs-pagination" role="navigation" aria-label="Pagination">
      <ul>
        <li class="prs-pagination-pager prs-pagination-pager_disabled"><a href="#" aria-label="Previous Page"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img"><use href="/_assets/prs-icons.svg#chevron-left" /></svg></a></li>
        <li><a href="#" aria-label="Current Page, Page 1" aria-current="true" aria-label="Go to Page 1">1</a></li>
        <li><a href="#" aria-label="Go to Page 2">2</a></li>
        <li><a href="#" aria-label="Go to Page 3">3</a></li>
        <li><a href="#" aria-label="Go to Page 4">4</a></li>
        <li><a href="#" aria-label="Go to Page 5">5</a></li>
        <li class="prs-pagination-pager"><a href="#" aria-label="Next Page"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img"><use href="/_assets/prs-icons.svg#chevron-right" /></svg></a></li>
      </ul>
    </nav>
  logic:
    text: "this.text"
---