Components

Pagination

A component for navigating a long list of results.

Showing 51 - 75 of 249 results
<div class="hods-pagination">
  <div class="hods-pagination__summary">
    Showing 51 - 75 of 249 results
  </div>
  <ul class="hods-pagination__list-items">
    <li class="hods-pagination__item" id="prevButton">
      <a class="hods-pagination__link" href="?page=2">
        <span aria-hidden="true" role="presentation">
          «
        </span>
        Previous
      </a>
    </li>
    <li class="hods-pagination__item">
      <a class="hods-pagination__link" href="?page=1">
        1
      </a>
    </li>
    <li class="hods-pagination__item">
      <a class="hods-pagination__link" href="?page=2">
        2
      </a>
    </li>
    <li class="hods-pagination__item">
      <a
        class="
          hods-pagination__link
          hods-pagination__link--current
        "
        href=""
      >
        3
      </a>
    </li>
    <li class="hods-pagination__item">
      <a class="hods-pagination__link" href="?page=4">
        4
      </a>
    </li>
    <li class="hods-pagination__item">
      <a class="hods-pagination__link" href="?page=5">
        5
      </a>
    </li>
    <li class="hods-pagination__item" id="nextButton">
      <a class="hods-pagination__link" href="?page=4">
        Next
        <span aria-hidden="true" role="presentation">
          »
        </span>
      </a>
    </li>
  </ul>
</div>
<Pagination
  results="249"
  resultsPerPage="25"
  page="3"
/>
Props
Name Type Default Description
id string - 'id' attribute to place on the base HTML element
classBlock string - Block name override in BEM style classes applied to all elements
classModifiers other - BEM style modifiers to apply to the base HTML element
className string - Extra classes to apply to the base HTML element
results number - REQUIRED. The total number of results
resultsPerPage number - REQUIRED. The number of results shown on each page
page number - REQUIRED. The current page being viewed

Design so you don’t need pagination as it hides content from the user. It can display a lot of unhelpful information that gets in the way to what the users are looking for. This may indicate the design isn’t working.

You can avoid pagination by:

  • setting the default number of results per page (try 50 items per page, although do test with users to get it right for that service)
  • avoid infinite scrolling as this is problematic for keyboard-only users

Consider what the sorting order should be to make the search more relevant. The more specific it is to the user's search criteria, the better the search results.

How it works

Standard pagination

Showing 51 - 75 of 249 results
<div class="hods-pagination">
  <div class="hods-pagination__summary">
    Showing 51 - 75 of 249 results
  </div>
  <ul class="hods-pagination__list-items">
    <li class="hods-pagination__item" id="prevButton">
      <a class="hods-pagination__link" href="?page=2">
        <span aria-hidden="true" role="presentation">
          «
        </span>
        Previous
      </a>
    </li>
    <li class="hods-pagination__item">
      <a class="hods-pagination__link" href="?page=1">
        1
      </a>
    </li>
    <li class="hods-pagination__item">
      <a class="hods-pagination__link" href="?page=2">
        2
      </a>
    </li>
    <li class="hods-pagination__item">
      <a
        class="
          hods-pagination__link
          hods-pagination__link--current
        "
        href=""
      >
        3
      </a>
    </li>
    <li class="hods-pagination__item">
      <a class="hods-pagination__link" href="?page=4">
        4
      </a>
    </li>
    <li class="hods-pagination__item">
      <a class="hods-pagination__link" href="?page=5">
        5
      </a>
    </li>
    <li class="hods-pagination__item" id="nextButton">
      <a class="hods-pagination__link" href="?page=4">
        Next
        <span aria-hidden="true" role="presentation">
          »
        </span>
      </a>
    </li>
  </ul>
</div>
<Pagination
  results="249"
  resultsPerPage="25"
  page="3"
/>

Start of pagination

Display the first page of results.

Showing 1 - 25 of 737 results
<div class="hods-pagination">
  <div class="hods-pagination__summary">
    Showing 1 - 25 of 737 results
  </div>
  <ul class="hods-pagination__list-items">
    <li class="hods-pagination__item"></li>
    <li class="hods-pagination__item"></li>
    <li class="hods-pagination__item">
      <a
        class="
          hods-pagination__link
          hods-pagination__link--current
        "
        href=""
      >
        1
      </a>
    </li>
    <li class="hods-pagination__item">
      <a class="hods-pagination__link" href="?page=2">
        2
      </a>
    </li>
    <li class="hods-pagination__item">
      <a class="hods-pagination__link" href="?page=3">
        3
      </a>
    </li>
    <li class="hods-pagination__item" id="nextButton">
      <a class="hods-pagination__link" href="?page=2">
        Next
        <span aria-hidden="true" role="presentation">
          »
        </span>
      </a>
    </li>
  </ul>
</div>
<Pagination
  results="737"
  resultsPerPage="25"
  page="1"
/>

Middle of pagination

Show the middle of the results.

Showing 351 - 375 of 737 results
<div class="hods-pagination">
  <div class="hods-pagination__summary">
    Showing 351 - 375 of 737 results
  </div>
  <ul class="hods-pagination__list-items">
    <li class="hods-pagination__item" id="prevButton">
      <a
        class="hods-pagination__link"
        href="?page=14"
      >
        <span aria-hidden="true" role="presentation">
          «
        </span>
        Previous
      </a>
    </li>
    <li class="hods-pagination__item">
      <a
        class="hods-pagination__link"
        href="?page=13"
      >
        13
      </a>
    </li>
    <li class="hods-pagination__item">
      <a
        class="hods-pagination__link"
        href="?page=14"
      >
        14
      </a>
    </li>
    <li class="hods-pagination__item">
      <a
        class="
          hods-pagination__link
          hods-pagination__link--current
        "
        href=""
      >
        15
      </a>
    </li>
    <li class="hods-pagination__item">
      <a
        class="hods-pagination__link"
        href="?page=16"
      >
        16
      </a>
    </li>
    <li class="hods-pagination__item">
      <a
        class="hods-pagination__link"
        href="?page=17"
      >
        17
      </a>
    </li>
    <li class="hods-pagination__item" id="nextButton">
      <a
        class="hods-pagination__link"
        href="?page=16"
      >
        Next
        <span aria-hidden="true" role="presentation">
          »
        </span>
      </a>
    </li>
  </ul>
</div>
<Pagination
  results="737"
  resultsPerPage="25"
  page="15"
/>

End of pagination

Display the last page of results.

Showing 726 - 737 of 737 results
<div class="hods-pagination">
  <div class="hods-pagination__summary">
    Showing 726 - 737 of 737 results
  </div>
  <ul class="hods-pagination__list-items">
    <li class="hods-pagination__item" id="prevButton">
      <a
        class="hods-pagination__link"
        href="?page=29"
      >
        <span aria-hidden="true" role="presentation">
          «
        </span>
        Previous
      </a>
    </li>
    <li class="hods-pagination__item">
      <a
        class="hods-pagination__link"
        href="?page=28"
      >
        28
      </a>
    </li>
    <li class="hods-pagination__item">
      <a
        class="hods-pagination__link"
        href="?page=29"
      >
        29
      </a>
    </li>
    <li class="hods-pagination__item">
      <a
        class="
          hods-pagination__link
          hods-pagination__link--current
        "
        href=""
      >
        30
      </a>
    </li>
    <li class="hods-pagination__item"></li>
    <li class="hods-pagination__item"></li>
  </ul>
</div>
<Pagination
  results="737"
  resultsPerPage="25"
  page="30"
/>

Near end

Display the second to last page of results.

Showing 701 - 725 of 737 results
<div class="hods-pagination">
  <div class="hods-pagination__summary">
    Showing 701 - 725 of 737 results
  </div>
  <ul class="hods-pagination__list-items">
    <li class="hods-pagination__item" id="prevButton">
      <a
        class="hods-pagination__link"
        href="?page=28"
      >
        <span aria-hidden="true" role="presentation">
          «
        </span>
        Previous
      </a>
    </li>
    <li class="hods-pagination__item">
      <a
        class="hods-pagination__link"
        href="?page=27"
      >
        27
      </a>
    </li>
    <li class="hods-pagination__item">
      <a
        class="hods-pagination__link"
        href="?page=28"
      >
        28
      </a>
    </li>
    <li class="hods-pagination__item">
      <a
        class="
          hods-pagination__link
          hods-pagination__link--current
        "
        href=""
      >
        29
      </a>
    </li>
    <li class="hods-pagination__item">
      <a
        class="hods-pagination__link"
        href="?page=30"
      >
        30
      </a>
    </li>
    <li class="hods-pagination__item"></li>
    <li class="hods-pagination__item" id="nextButton">
      <a
        class="hods-pagination__link"
        href="?page=30"
      >
        Next
        <span aria-hidden="true" role="presentation">
          »
        </span>
      </a>
    </li>
  </ul>
</div>
<Pagination
  results="737"
  resultsPerPage="25"
  page="29"
/>

Results per page

Display a different number of results per page.

Showing 11 - 20 of 249 results
<div class="hods-pagination">
  <div class="hods-pagination__summary">
    Showing 11 - 20 of 249 results
  </div>
  <ul class="hods-pagination__list-items">
    <li class="hods-pagination__item" id="prevButton">
      <a class="hods-pagination__link" href="?page=1">
        <span aria-hidden="true" role="presentation">
          «
        </span>
        Previous
      </a>
    </li>
    <li class="hods-pagination__item"></li>
    <li class="hods-pagination__item">
      <a class="hods-pagination__link" href="?page=1">
        1
      </a>
    </li>
    <li class="hods-pagination__item">
      <a
        class="
          hods-pagination__link
          hods-pagination__link--current
        "
        href=""
      >
        2
      </a>
    </li>
    <li class="hods-pagination__item">
      <a class="hods-pagination__link" href="?page=3">
        3
      </a>
    </li>
    <li class="hods-pagination__item">
      <a class="hods-pagination__link" href="?page=4">
        4
      </a>
    </li>
    <li class="hods-pagination__item" id="nextButton">
      <a class="hods-pagination__link" href="?page=3">
        Next
        <span aria-hidden="true" role="presentation">
          »
        </span>
      </a>
    </li>
  </ul>
</div>
<Pagination
  results="249"
  resultsPerPage="10"
  page="2"
/>

Research

If your service uses this component, let us know of any insights you have on research.

Accessibility

If you do require pagination, ensure that:

  • there is good colour contrast
  • the font size is legible
  • large clickable hit areas are provided and are clearly spaced out
  • the current page is clearly identified
  • you set a maximum list of 5 pages
  • you provide 'previous' and 'next' links. Don't rely on icons alone