Skip to content

role navigation

Pagination draft v0.1.0

Lets people move between the pages of a long list, with the current page marked.

A pagination splits a long list of results into pages and lets people go to a page by its number, or to the previous and next ones. It shows which page is current. The pages are links: each one has a destination, so the browser handles history and focus. Which page numbers to show (all, a window around the current one) is the application's choice: the component renders the list it is given.

Playground

JSON array of item entries ("part": "item" for a item).

HTML 
<nav class="ds-pagination" aria-label="Pagination" data-size="medium">
  <ul class="ds-pagination__list" data-part="list">
    <li class="ds-pagination__item" data-part="previous">
      <a class="ds-pagination__link" data-part="link" href="#">
        <span
          class="ds-pagination__icon"
          aria-hidden="true"
        >chevron_left</span>
        <span>Previous</span>
      </a>
    </li>
    <li class="ds-pagination__item" data-part="item">
      <a class="ds-pagination__link" data-part="link" href="#">1</a>
    </li>
    <li class="ds-pagination__item" data-part="item">
      <a class="ds-pagination__link" data-part="link" href="#">2</a>
    </li>
    <li class="ds-pagination__item" data-part="item">
      <span
        class="ds-pagination__link"
        data-part="link"
        aria-current="page"
      >3</span>
    </li>
    <li class="ds-pagination__item" data-part="item">
      <a class="ds-pagination__link" data-part="link" href="#">4</a>
    </li>
    <li class="ds-pagination__item" data-part="item">
      <a class="ds-pagination__link" data-part="link" href="#">5</a>
    </li>
    <li class="ds-pagination__item" data-part="next">
      <a class="ds-pagination__link" data-part="link" href="#">
        <span>Next</span>
        <span
          class="ds-pagination__icon"
          aria-hidden="true"
        >chevron_right</span>
      </a>
    </li>
  </ul>
</nav>