Skip to main content

Pagination

Information: Documentation incomplete

This component still requires documentation.

Use the pagination component to allow users to navigate through content that is split over multiple pages.

Example

Open example in a new window
View HTML 
<nav class="uhb-c-pagination" aria-label="pagination">
  <ul class="uhb-c-pagination__list">
    <li class="uhb-c-pagination__item uhb-c-pagination__item--first">
      <a class="uhb-c-button uhb-c-button--action" href="#">
        <svg class="uhb-c-icon uhb-c-icon--navigate-first" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="M2 22h4V2H2v20ZM22 5l-3-3L9 12l10 10 3-3-7-7 7-7Z"/>
        </svg>
        <span class="uhb-u-visually-hidden">Go to first page (page 1)</span>
      </a>
    </li>
    <li class="uhb-c-pagination__item  uhb-c-pagination__item--previous">
      <a class="uhb-c-button uhb-c-button--action" href="#">
        <svg class="uhb-c-icon uhb-c-icon--chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="m15.55 2 2.9 2.9-7.1 7.1 7.1 7.1-2.9 2.9-10-10 10-10Z"/>
        </svg>
        <span class="uhb-u-visually-hidden">Go to the previous page (page 2)</span>
      </a>
    </li>
    <li class="uhb-c-pagination__item">
      <a class="uhb-c-pagination__link" href="#">
        <span class="uhb-u-visually-hidden">Go to page </span>
        3
      </a>
    </li>
    <li class="uhb-c-pagination__item is-current">
      <a class="uhb-c-pagination__link" href="#" aria-current="page" aria-label="Current page (page 4)">4</a>
    </li>
    <li class="uhb-c-pagination__item">
      <a class="uhb-c-pagination__link" href="#" aria-label="Go to page 4">
        <span class="uhb-u-visually-hidden">Go to page </span>
        5
      </a>
    </li>
    <li class="uhb-c-pagination__item">
      <a class="uhb-c-pagination__link" href="#">
        <span class="uhb-u-visually-hidden">Go to page </span>
        6
      </a>
    </li>
    <li class="uhb-c-pagination__item uhb-c-pagination__item--next">
      <a class="uhb-c-button uhb-c-button--action" href="#">
        <svg class="uhb-c-icon uhb-c-icon--chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="m8.45 22-2.9-2.9 7.1-7.1-7.1-7.1L8.45 2l10 10-10 10Z"/>
        </svg>
        <span class="uhb-u-visually-hidden">Go to the next page (page 4)</span>
      </a>
    </li>
    <li class="uhb-c-pagination__item uhb-c-pagination__item--last">
      <a class="uhb-c-button uhb-c-button--action" href="#">
        <svg class="uhb-c-icon uhb-c-icon--navigate-last" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="M22 2h-4v20h4V2ZM2 19l3 3 10-10L5 2 2 5l7 7-7 7Z" />
        </svg>
        <span class="uhb-u-visually-hidden">Go to the last page (page 15)</span>
      </a>
    </li>
  </ul>
</nav>