Pagination

Use pagination to help users navigate through large sets of content split across multiple pages.

Default Pagination

Show the current page, adjacent pages, and navigation to first/last pages.

<nav aria-label="Pagination">
  <ul class="pagination">
    <li class="pagination-item">
      <a href="#" class="pagination-link">Previous</a>
    </li>
    <li class="pagination-item">
      <a href="#" class="pagination-link">1</a>
    </li>
    <li class="pagination-item">
      <a href="#" class="pagination-link">2</a>
    </li>
    <li class="pagination-item">
      <a href="#" class="pagination-link pagination-link-current" aria-current="page">3</a>
    </li>
    ...
    <li class="pagination-item">
      <a href="#" class="pagination-link">Next</a>
    </li>
  </ul>
</nav>

With Ellipsis

Use an ellipsis to indicate skipped pages when there are many pages.

<li class="pagination-item">
  <span class="pagination-ellipsis">&hellip;</span>
</li>

First Page

When on the first page, disable or hide the Previous link.

<!-- No Previous link on first page -->

Last Page

When on the last page, disable or hide the Next link.

<!-- No Next link on last page -->

Simple Pagination

For simpler navigation, use just Previous and Next links.

<nav aria-label="Pagination">
  <ul class="pagination">
    <li class="pagination-item">
      <a href="#" class="pagination-link">← Previous</a>
    </li>
    <li class="pagination-item">
      <a href="#" class="pagination-link">Next →</a>
    </li>
  </ul>
</nav>

When to Use Pagination

Use pagination for:

• Search results
• Lists with many items (news articles, documents)
• Table data spanning multiple pages

Consider alternatives when:

• There are fewer than 10-20 items (show all on one page)
• Users need to compare items across pages (consider filtering/sorting)
• The content is a continuous narrative (use infinite scroll sparingly)

Usage Guidelines

Do

• Show the current page clearly
• Provide Previous and Next links
• Show total number of pages when helpful
• Keep page numbers visible for context
• Use consistent items per page (20, 50, 100)

Don't

• Don't show every page number for large sets
• Don't make users guess which page they're on
• Don't change the number of items per page unexpectedly
• Don't use pagination for fewer than 2 pages

Accessibility

• Wrap in a <nav> element with aria-label="Pagination"
• Use aria-current="page" for the current page
• Links are keyboard accessible
• Focus states are clearly visible
• Screen readers can identify the navigation purpose

CSS Classes

/* Container */
.pagination { }

/* Item wrapper */
.pagination-item { }

/* Link styles */
.pagination-link { }
.pagination-link-current { }

/* Ellipsis */
.pagination-ellipsis { }