Skip to contentSkip to footer
A row of white Eurasian Spoonbills standing on top of a lush green field

Photo: Zdeněk Macháček

Pagination

Introduction

The pagination component lets users navigate across pages of content. It uses the .pagination class on a <ul> element and inherits base styles from the navigation system.

Pagination

Add .pagination to a <ul> element wrapped in a <nav>. Page links and previous/next controls use an <a> or <button> inside each <li>. Use icon-more-horizontal inside a plain <li> to indicate skipped pages. See Figure 1.

HTML
  <nav aria-label="Pagination">


    <ul class="pagination">
      <li>
        <a href="#prev" aria-label="Previous page">
          <span class="icon icon-arrow-left" aria-hidden="true"></span>
        </a>
      </li>
      <li>
        <a href="#1">1</a>
      </li>
      <li>
        <a href="#2">2</a>
      </li>
      <li>
        <a href="#3" aria-current="page">3</a>
      </li>
      <li>
        <a href="#4">4</a>
      </li>
      <li aria-hidden="true">
        <span class="icon icon-more-horizontal" aria-hidden="true"></span>
      </li>
      <li>
        <a href="#9">9</a>
      </li>
      <li>
        <a href="#next" aria-label="Next page">
          <span class="icon icon-arrow-right" aria-hidden="true"></span>
        </a>
      </li>
    </ul>
  </nav>
Figure 1
Figure 1 notes
LinesDetails
1

The <nav> element with aria-label is required. It identifies the pagination as a navigation landmark. Use a unique label if more than one pagination component appears on a page.

3

The .pagination class on the <ul> element provides the bordered bar layout, item sizing, and dividers between items.

4-8

Previous links are placed first in the list. aria-label is required when the link contains only an icon.

16

Add aria-current="page" to the active page link. Omit the previous link when on the first page and the next link when on the last.

21-23

The truncation item indicates skipped pages. Place icon-more-horizontal directly inside the <li> with no <a> or <button> wrapper — it is purely visual. Add aria-hidden="true" to the <li> so screen readers skip it. Repeat wherever pages are omitted.

27-31

Next links are placed last in the list. aria-label is required when the link contains only an icon.

Visible Previous and Next Labels

When previous and next links include visible text, the text provides the accessible name. In that case, aria-label is not needed.

HTML
  <nav aria-label="Pagination">


    <ul class="pagination">
      <li>
        <a href="#prev">
          <span class="icon icon-arrow-left" aria-hidden="true"></span>
          <span class="text">Previous</span>
        </a>
      </li>
      <li>
        <a href="#1">1</a>
      </li>
      <li>
        <a href="#2">2</a>
      </li>
      <li>
        <a href="#3" aria-current="page">3</a>
      </li>
      <li>
        <a href="#4">4</a>
      </li>
      <li aria-hidden="true">
        <span class="icon icon-more-horizontal" aria-hidden="true"></span>
      </li>
      <li>
        <a href="#9">9</a>
      </li>
      <li>
        <a href="#next">
          <span class="text">Next</span>
          <span class="icon icon-arrow-right" aria-hidden="true"></span>
        </a>
      </li>
    </ul>


  </nav>
Figure 2

Navigation

Button

Icon