Pagination

Best Practices

• Include the <select> for users to choose how many items they want to see on each page.
• Use the <nav> element as the wrapping element for the page links.
• Show the number of paginated items.
• Indicate the range of items being viewed.
• Indicate the current page visually and accessibly.
• Use seven slots at most (not counting previous and next links) for the page links: First, overflow ellipsis, one fore middle page, middle page, one after middle page, overflow ellipsis, last.
• Remove any extra slots if fewer than 7 pages exist. You should use all slots for the page link numbers.
• Hide the previous page link when on the first page and hide next page when on the last page.
• Always show first page, current page, and last page. Other pages can be represented with ellipses around current page.
• Present previous page only when first page isn’t current.
• Present next page only when last page isn’t current.
• Place it below the content which it is paginating.
• Conditionally hidden items should not be focusable when hidden.
• Do not use it to display movement, such as steps in a process. Use the Progress Indicator instead.

For accessibility

• Screen reader text must be included with page links.
• Current page must include aria-page="current".
• Results area should update in the same page and receive focus via:
  aria-live="polite" on the results summary (“Showing X to Y of Z records”), or
  move focus to the heading of the results or the first result row.
• All interactive elements must be reachable in a logical focus order with the keyboard via Tab and activated using Enter / Space.

Usage

<div class="row justify-content-center align-items-md-end">
  <div class="col-md-3">
    <form action="sampleAction">
      <label class="visually-hidden" for="NumberItemsToShow">Show how many?</label>
      <select class="custom-select form-select mb-4 mb-lg-0" id="NumberItemsToShow">
        <option selected>Show 10 per page</option>
        <option value="1">Show 25 per page</option>
        <option value="2">Show 50 per page</option>
        <option value="3">Show All</option>
      </select>
    </form>
  </div>
  <div class="col-md-6">
    <nav aria-label="Results navigation">
      <ul class="pagination justify-content-center mb-lg-0">
        <li class="page-item">
          <a class="page-link" href="#">
            <span class="icon fas fa-angle-left" aria-hidden="true"></span>
            <span class="visually-hidden">Previous page</span>
          </a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">
            <span class="visually-hidden">page</span> 1
          </a>
        </li>
        <li class="page-item disabled">
          <span class="page-link">
            <span class="visually-hidden">pages between first and current</span>
            <span aria-hidden="true"> &hellip; </span>
          </span>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">
            <span class="visually-hidden">page</span> 8
          </a>
        </li>
        <li class="page-item active">
          <a class="page-link" href="#" aria-current="page">
            <span class="visually-hidden">page</span> 9
          </a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">
            <span class="visually-hidden">page</span> 10
          </a>
        </li>
        <li class="page-item disabled">
          <span class="page-link">
            <span class="visually-hidden">pages between last and current</span>
            <span aria-hidden="true"> &hellip; </span>
          </span>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">
            <span class="visually-hidden">last page</span> 17
          </a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">
            <span class="icon fas fa-angle-right" aria-hidden="true"></span>
            <span class="visually-hidden">Next page</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="col-md-3 text-center text-lg-right text-lg-end">
    <p class="mb-2">Showing<br class="d-none d-md-block d-lg-none" aria-live="polite"> <strong>X</strong> to <strong>Y</strong> of <strong>Z</strong> items.</p>
  </div>
</div>

Resources

• Bootstrap Pagination