Pagination

Pagination is a navigation system that allows users to navigate through a set of content in smaller, more manageable chunks. It is commonly used in websites and applications that display large amounts of data or content.

Simple Pagination

A simple pagination component that displays the current page number and the total number of pages.

<nav class="flex items-center justify-between p-4" aria-label="Pagination">
  <div class="flex items-center space-x-2 text-base">
    <a
      href="#"
      class="flex items-center rounded-lg border border-gray-400 bg-white px-3 py-2 text-indigo-600 outline-black hover:bg-gray-100 hover:text-indigo-700 focus:outline dark:border-zinc-700 dark:bg-black dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M15.41 7.41L14 6l-6 6l6 6l1.41-1.41L10.83 12z"></path>
      </svg>Prev<span class="sr-only"> page</span></a
    >

    <a
      href="#"
      class="flex rounded-lg border border-gray-400 bg-white px-3 py-2 text-indigo-600 outline-black hover:bg-gray-100 hover:text-indigo-700 focus:outline dark:border-zinc-700 dark:bg-black dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      ><span class="sr-only"> page</span>3</a
    >
    <a
      href="#"
      aria-current="page"
      class="flex rounded-lg border border-gray-400 bg-indigo-100 px-3 py-2 text-indigo-800 outline-black hover:bg-indigo-300 hover:text-indigo-900 focus:outline dark:border-zinc-700 dark:bg-zinc-800 dark:text-indigo-100 dark:outline-white dark:hover:bg-zinc-700 dark:hover:text-indigo-200"
      ><span class="sr-only"> page</span>4</a
    >
    <a
      href="#"
      class="flex rounded-lg border border-gray-400 bg-white px-3 py-2 text-indigo-600 outline-black hover:bg-gray-100 hover:text-indigo-700 focus:outline dark:border-zinc-700 dark:bg-black dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      ><span class="sr-only"> page</span>5</a
    >

    <a
      href="#"
      class="flex items-center rounded-lg border border-gray-400 bg-white px-3 py-2 text-indigo-600 outline-black hover:bg-gray-100 hover:text-indigo-700 focus:outline dark:border-zinc-700 dark:bg-black dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      >Next<span class="sr-only">page</span><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z"></path>
      </svg></a
    >
  </div>
</nav>

<nav class="flex items-center justify-between p-4" aria-label="Pagination">
  <div class="flex items-center space-x-2 text-base">
    <a
      href="#"
      class="flex items-center rounded-lg border border-gray-400 bg-white px-3 py-2 text-indigo-600 outline-black hover:bg-gray-100 hover:text-indigo-700 focus:outline dark:border-zinc-700 dark:bg-black dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M15.41 7.41L14 6l-6 6l6 6l1.41-1.41L10.83 12z"></path>
      </svg>Prev<span class="sr-only"> page</span></a
    >

    <a
      href="#"
      class="flex rounded-lg border border-gray-400 bg-white px-3 py-2 text-indigo-600 outline-black hover:bg-gray-100 hover:text-indigo-700 focus:outline dark:border-zinc-700 dark:bg-black dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      ><span class="sr-only"> page</span>3</a
    >
    <a
      href="#"
      aria-current="page"
      class="flex rounded-lg border border-gray-400 bg-indigo-100 px-3 py-2 text-indigo-800 outline-black hover:bg-indigo-300 hover:text-indigo-900 focus:outline dark:border-zinc-700 dark:bg-zinc-800 dark:text-indigo-100 dark:outline-white dark:hover:bg-zinc-700 dark:hover:text-indigo-200"
      ><span class="sr-only"> page</span>4</a
    >
    <a
      href="#"
      class="flex rounded-lg border border-gray-400 bg-white px-3 py-2 text-indigo-600 outline-black hover:bg-gray-100 hover:text-indigo-700 focus:outline dark:border-zinc-700 dark:bg-black dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      ><span class="sr-only"> page</span>5</a
    >

    <a
      href="#"
      class="flex items-center rounded-lg border border-gray-400 bg-white px-3 py-2 text-indigo-600 outline-black hover:bg-gray-100 hover:text-indigo-700 focus:outline dark:border-zinc-700 dark:bg-black dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      >Next<span class="sr-only">page</span><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z"></path>
      </svg></a
    >
  </div>
</nav>

Alternate Pagination Style

An alternate boxed pagination style that displays the current page number and the total number of pages.

<nav class="flex items-center justify-between p-4" aria-label="Pagination">
  <div class="flex items-center text-base">
    <a
      href="#"
      class="flex items-center rounded-s-lg border border-gray-400 bg-white px-3 py-2 text-indigo-600 outline-black hover:bg-gray-100 hover:text-indigo-700 focus:outline dark:border-zinc-700 dark:bg-black dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M15.41 7.41L14 6l-6 6l6 6l1.41-1.41L10.83 12z"></path>
      </svg><span>Prev</span>
      <span class="sr-only"> page</span></a
    >

    <a
      href="#"
      class="flex border border-gray-400 bg-white px-5 py-2 text-indigo-600 outline-black hover:bg-gray-100 hover:text-indigo-700 focus:outline dark:border-zinc-700 dark:bg-black dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      ><span class="sr-only"> page</span>3</a
    >
    <a
      href="#"
      aria-current="page"
      class="flex border border-gray-400 bg-indigo-100 px-5 py-2 text-indigo-800 outline-black hover:bg-indigo-300 hover:text-indigo-900 focus:outline dark:border-zinc-700 dark:bg-zinc-800 dark:text-indigo-100 dark:outline-white dark:hover:bg-zinc-700 dark:hover:text-indigo-200"
      ><span class="sr-only"> page</span>4</a
    >
    <a
      href="#"
      class="flex border border-gray-400 bg-white px-5 py-2 text-indigo-600 outline-black hover:bg-gray-100 hover:text-indigo-700 focus:outline dark:border-zinc-700 dark:bg-black dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      ><span class="sr-only"> page</span>5</a
    >

    <a
      href="#"
      class="flex items-center rounded-e-lg border border-gray-400 bg-white px-3 py-2 text-indigo-600 outline-black hover:bg-gray-100 hover:text-indigo-700 focus:outline dark:border-zinc-700 dark:bg-black dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      >Next<span class="sr-only"> page</span><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z"></path>
      </svg></a
    >
  </div>
</nav>

<nav class="flex items-center justify-between p-4" aria-label="Pagination">
  <div class="flex items-center text-base">
    <a
      href="#"
      class="flex items-center rounded-s-lg border border-gray-400 bg-white px-3 py-2 text-indigo-600 outline-black hover:bg-gray-100 hover:text-indigo-700 focus:outline dark:border-zinc-700 dark:bg-black dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M15.41 7.41L14 6l-6 6l6 6l1.41-1.41L10.83 12z"></path>
      </svg><span>Prev</span>
      <span class="sr-only"> page</span></a
    >

    <a
      href="#"
      class="flex border border-gray-400 bg-white px-5 py-2 text-indigo-600 outline-black hover:bg-gray-100 hover:text-indigo-700 focus:outline dark:border-zinc-700 dark:bg-black dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      ><span class="sr-only"> page</span>3</a
    >
    <a
      href="#"
      aria-current="page"
      class="flex border border-gray-400 bg-indigo-100 px-5 py-2 text-indigo-800 outline-black hover:bg-indigo-300 hover:text-indigo-900 focus:outline dark:border-zinc-700 dark:bg-zinc-800 dark:text-indigo-100 dark:outline-white dark:hover:bg-zinc-700 dark:hover:text-indigo-200"
      ><span class="sr-only"> page</span>4</a
    >
    <a
      href="#"
      class="flex border border-gray-400 bg-white px-5 py-2 text-indigo-600 outline-black hover:bg-gray-100 hover:text-indigo-700 focus:outline dark:border-zinc-700 dark:bg-black dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      ><span class="sr-only"> page</span>5</a
    >

    <a
      href="#"
      class="flex items-center rounded-e-lg border border-gray-400 bg-white px-3 py-2 text-indigo-600 outline-black hover:bg-gray-100 hover:text-indigo-700 focus:outline dark:border-zinc-700 dark:bg-black dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      >Next<span class="sr-only"> page</span><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z"></path>
      </svg></a
    >
  </div>
</nav>

Ghost Pagination Style

This is similar to the Simple Pagination style but uses ghost styling for the pagination buttons.

<nav class="flex items-center justify-between p-4" aria-label="Pagination">
  <div class="flex items-center space-x-2 text-base">
    <a
      href="#"
      class="flex items-center rounded-lg px-3 py-2 text-indigo-600 outline-black hover:bg-gray-300 hover:text-indigo-700 focus:outline dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M15.41 7.41L14 6l-6 6l6 6l1.41-1.41L10.83 12z"></path>
      </svg>Prev<span class="sr-only"> page</span></a
    >

    <a
      href="#"
      class="flex rounded-lg px-3 py-2 text-indigo-600 outline-black hover:bg-gray-300 hover:text-indigo-700 focus:outline dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      ><span class="sr-only"> page</span>3
    </a>
    <a
      href="#"
      aria-current="page"
      class="flex rounded-lg bg-indigo-100 px-3 py-2 text-indigo-800 outline-black hover:bg-indigo-300 hover:text-indigo-900 focus:outline dark:bg-zinc-800 dark:text-indigo-100 dark:outline-white dark:hover:bg-zinc-700 dark:hover:text-indigo-200"
      ><span class="sr-only"> page</span>4</a
    >
    <a
      href="#"
      class="flex rounded-lg px-3 py-2 text-indigo-600 outline-black hover:bg-gray-300 hover:text-indigo-700 focus:outline dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      ><span class="sr-only"> page</span>5</a
    >

    <a
      href="#"
      class="flex items-center rounded-lg px-3 py-2 text-indigo-600 outline-black hover:bg-gray-300 hover:text-indigo-700 focus:outline dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      >Next<span class="sr-only"> page</span><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z"></path>
      </svg></a
    >
  </div>
</nav>

<nav class="flex items-center justify-between p-4" aria-label="Pagination">
  <div class="flex items-center space-x-2 text-base">
    <a
      href="#"
      class="flex items-center rounded-lg px-3 py-2 text-indigo-600 outline-black hover:bg-gray-300 hover:text-indigo-700 focus:outline dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M15.41 7.41L14 6l-6 6l6 6l1.41-1.41L10.83 12z"></path>
      </svg>Prev<span class="sr-only"> page</span></a
    >

    <a
      href="#"
      class="flex rounded-lg px-3 py-2 text-indigo-600 outline-black hover:bg-gray-300 hover:text-indigo-700 focus:outline dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      ><span class="sr-only"> page</span>3
    </a>
    <a
      href="#"
      aria-current="page"
      class="flex rounded-lg bg-indigo-100 px-3 py-2 text-indigo-800 outline-black hover:bg-indigo-300 hover:text-indigo-900 focus:outline dark:bg-zinc-800 dark:text-indigo-100 dark:outline-white dark:hover:bg-zinc-700 dark:hover:text-indigo-200"
      ><span class="sr-only"> page</span>4</a
    >
    <a
      href="#"
      class="flex rounded-lg px-3 py-2 text-indigo-600 outline-black hover:bg-gray-300 hover:text-indigo-700 focus:outline dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      ><span class="sr-only"> page</span>5</a
    >

    <a
      href="#"
      class="flex items-center rounded-lg px-3 py-2 text-indigo-600 outline-black hover:bg-gray-300 hover:text-indigo-700 focus:outline dark:text-indigo-400 dark:outline-white dark:hover:bg-zinc-900 dark:hover:text-indigo-400"
      >Next<span class="sr-only"> page</span><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z"></path>
      </svg></a
    >
  </div>
</nav>

Accessibility Testing Status

Component	NVDA	Windows Narrator	WAVE	Axe	IBM Equal Access
Simple Pagination	Yes	Yes	Yes	Yes	Yes
Alternate Pagination	Yes	Yes	Yes	Yes	Yes
Ghost Pagination	Yes	Yes	Yes	Yes	Yes

While there are no specific patters from the ARIA Authoring Practices Guide for Pagination, the implementation of the pagination components follows best practices for navigational elements.