Skip to main content

Pagination

The Pagination component uses basic text styles by default.

The component may also use navigation text styles. Apply the appropriate class to the root element of the navigation component.

Overview

<nav aria-label="Pagination example">
   <ul class="env-pagination">
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#">Previous</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 1">1</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 2">2</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 3">3</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 4">4</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 5">5</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#">Next</a>
      </li>
   </ul>
</nav>

States

Current

Use aria-current="page" or aria-current="true" on a link to indicate that the link is the current page or item.

<nav aria-label="Pagination example">
   <ul class="env-pagination">
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#">Previous</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 1">1</a>
      </li>
      <li class="env-pagination__item">
         <a
            class="env-pagination__link"
            aria-current="true"
            href="#"
            aria-label="Current Page, Page 2"
            >2</a
         >
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 3">3</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#">Next</a>
      </li>
   </ul>
</nav>

Disabled

Any element except button without a href attribute is considered disabled. Buttons are disabled using the disabled attribute. If you must use a link, remove the href attribute and set the aria-disabled="true" and aria-role="link" attributes.

<nav aria-label="Pagination example">
   <ul class="env-pagination">
      <li class="env-pagination__item">
         <span class="env-pagination__link">Previous</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 1">1</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 2">2</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 3">3</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#">Next</a>
      </li>
   </ul>
</nav>

Alignment

Center

<nav aria-label="Pagination example">
   <ul class="env-pagination env-pagination--center">
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#">Previous</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 1">1</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 2">2</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 3">3</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#">Next</a>
      </li>
   </ul>
</nav>

End

<nav aria-label="Pagination example">
   <ul class="env-pagination env-pagination--end">
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#">Previous</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 1">1</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 2">2</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 3">3</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#">Next</a>
      </li>
   </ul>
</nav>

Sizes

Small

<nav aria-label="Pagination example">
   <ul class="env-pagination env-pagination--small">
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 1">1</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 2">2</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 3">3</a>
      </li>
   </ul>
</nav>

Large

<nav aria-label="Pagination example">
   <ul class="env-pagination env-pagination--large">
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 1">1</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 2">2</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 3">3</a>
      </li>
   </ul>
</nav>

Envision documentation