UCLA Design System

Pagination

Pagination is navigation for paginated content.

Paginated content is any content split into multiple pages determined only by a specific amount of content per page, not split by any meaningful attribute, like feature or subject or step. Search results and article collections are often paginated. Readers use the pagination component to move from page to page in paginated content, or directly to the first or last page of the paginated set.

When to use

Search results. Pagination is most commonly used with paginated search results. Our Pagination component is designed to work both with results that have a discrete number of results pages (bounded) and those with an uncalculated number of results pages (unbounded). See Using the Pagination component, below, for more on bounded and unbounded sets.

Multi-page collections of related items. Splitting a large collection of related items into individual pages can improve browsability and scannability. Common examples of multi-page collections include articles related to a category or tag, content archives, and history or activity.

Anatomy

Pagination Anatomy

1. Double Arrow Previous Button (required)

Links to the first page in the sequence

2. Single Arrow Previous Button (required)

Links to the page previous to the page user is currently on.

3. Current Page Number Button (required)

Page user is currently on has a hover-style state permenantly applied.

4. Page Number Button (required)

Default page number links. Initially, 1-10 is displayed. Upon moving to page 11 or higher, the next set of 10 are displayed (11-20), and so on. On mobile, 1-5 is displayed (or whatever fits on smallest viewport). If there are less than 10 pages, only the number of pages are displayed.

5. Single Arrow Next Button (required)

Links to the page after the page user is currently on.

6. Double Arrow Next Button (required)

Links to the last known page in the sequence.

Examples

<nav class="ucla-pagination" aria-label="Pagination">
  <ul class="ucla-pagination--list">
    <li class="ucla-pagination--list-item ucla-is-disabled">
      <a class="ucla-pagination--page" href="#" aria-label="First Page">
        <svg viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M6 12L7.41 10.59L2.83 6L7.41 1.41L6 1.23266e-07L3.29016e-06 6L6 12Z"
            fill="#00598C"
          />
          <path
            d="M11 12L12.41 10.59L7.83 6L12.41 1.41L11 1.23266e-07L5 6L11 12Z"
            fill="#00598C"
          />
        </svg>
      </a>
    </li>
    <li class="ucla-pagination--list-item ucla-is-disabled">
      <a class="ucla-pagination--page" href="#" aria-label="Previous">
        <svg viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M6 12L7.41 10.59L2.83 6L7.41 1.41L6 1.23266e-07L3.29016e-06 6L6 12Z"
            fill="#00598C"
          />
        </svg>
      </a>
    </li>
    <li class="ucla-pagination--list-item" aria-current="page"><a
        class="ucla-pagination--page ucla-pagination--page--current"
        href="#"
      >1</a></li>
    <li class="ucla-pagination--list-item"><a
        class="ucla-pagination--page"
        href="#"
      >2</a></li>
    <li class="ucla-pagination--list-item"><a
        class="ucla-pagination--page"
        href="#"
      >3</a></li>
    <li class="ucla-pagination--list-item"><a
        class="ucla-pagination--page"
        href="#"
      >4</a></li>
    <li class="ucla-pagination--list-item"><a
        class="ucla-pagination--page"
        href="#"
      >5</a></li>
    <li class="ucla-pagination--list-item"><a
        class="ucla-pagination--page"
        href="#"
      >6</a></li>
    <li class="ucla-pagination--list-item"><a
        class="ucla-pagination--page"
        href="#"
      >7</a></li>
    <li class="ucla-pagination--list-item"><a
        class="ucla-pagination--page"
        href="#"
        aria-label="Next"
      >

        <svg viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M1.41 0L0 1.41L4.58 6L0 10.59L1.41 12L7.41 6L1.41 0Z"
            fill="#00598C"
          />
        </svg>

      </a></li>
    <li class="ucla-pagination--list-item"><a
        class="ucla-pagination--page"
        href="#"
        aria-label="Last Page"
      >
        <svg viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M1.41 0L0 1.41L4.58 6L0 10.59L1.41 12L7.41 6L1.41 0Z"
            fill="#00598C"
          />
          <path
            d="M6.41 0L5 1.41L9.58 6L5 10.59L6.41 12L12.41 6L6.41 0Z"
            fill="#00598C"
          />
        </svg>
      </a></li>
  </ul>
</nav>

Best Practices

Highlight the current page. Pagination shows the current page the user is on in relation to the entire collection of pages.

Always include the first, previous, and next pages. Users should always be able to navigate to each of these pages from any page in the set.

Show navigation items in a single line. Pagination can be hard to understand — and individual items can be more difficult to select — when the items break over one line. Don’t split the navigation items over multiple lines. Avoid using Pagination in any context where it would be more than one line long.

Use as few navigation items as possible. Showing more pages than necessary tends to add complexity and use more space without proportional increases to the component’s functionality. Focus on the essential actions and avoid adding more items to Pagination just to fill space.

Use generous touch targets. Use touch targets that are big enough to select with any finger and have enough separation to avoid mistakes.

Optimize the number of entries per page. Consider page load, performance, and the user’s scrolling preferences when determining how many items are displayed on each page. Some paginated content benefits from user control over the number of elements to show on each page.