分頁 (Pagination)

  • 新提案
  • →
  • 封閉測試
  • →
  • 公開測試
  • →
  • 已穩定
成熟度說明
  • 新提案：未完成開發、請勿使用。
  • 封閉測試：開發暫時性完成，可使用。可能仍有親和力或其他使用上問題待透過實測發現。
  • 公開測試：開發暫時性完成，歡迎使用。具有完整親和力報告。
  • 已穩定：開發完成、歡迎使用。應無任何親和力或使用上問題。

說明

  • 分頁（Pagination）用於將大量內容拆分成多個頁面，並提供使用者在頁面間前後移動、或直接跳至特定頁面的導覽功能。
  • 常見於搜尋結果、文章列表、資料表格等長內容清單。
  • 元件設計為包含 7 個等寬且等距的元素，並排成一行以保持視覺穩定。

已知總頁數

適用於後端已知總筆數、能計算出總頁數的情境，例如搜尋結果、資料列表。

HTML
<nav aria-label="搜尋結果分頁" class="pagination">
  <ul class="pagination__list">
    <li class="pagination__item pagination__item--arrow">
      <a href="?page=9" class="pagination__link pagination__link--prev" rel="prev" aria-label="上一頁">
        <span class="pagination__chevron pagination__chevron--prev" aria-hidden="true"></span>
        <span>上一頁</span>
      </a>
    </li>
    <li class="pagination__item">
      <a href="?page=1" class="pagination__link" aria-label="第 1 頁">1</a>
    </li>
    <li class="pagination__item pagination__item--overflow" aria-label="省略中間頁碼">
      <span aria-hidden="true">…</span>
    </li>
    <li class="pagination__item">
      <a href="?page=9" class="pagination__link" aria-label="第 9 頁">9</a>
    </li>
    <li class="pagination__item">
      <a href="?page=10" class="pagination__link" aria-label="第 10 頁,目前頁面" aria-current="page">10</a>
    </li>
    <li class="pagination__item">
      <a href="?page=11" class="pagination__link" aria-label="第 11 頁">11</a>
    </li>
    <li class="pagination__item pagination__item--overflow" aria-label="省略後續頁碼">
      <span aria-hidden="true">…</span>
    </li>
    <li class="pagination__item">
      <a href="?page=24" class="pagination__link" aria-label="最後一頁,第 24 頁">24</a>
    </li>
    <li class="pagination__item pagination__item--arrow">
      <a href="?page=11" class="pagination__link pagination__link--next" rel="next" aria-label="下一頁">
        <span>下一頁</span>
        <span class="pagination__chevron pagination__chevron--next" aria-hidden="true"></span>
      </a>
    </li>
  </ul>
</nav>

未知總頁數

適用於無法預先得知總頁數的情境，例如串流資料、API 分頁。不顯示「最後一頁」，並在序列末端維持省略符號。

HTML
<nav aria-label="搜尋結果分頁" class="pagination">
  <ul class="pagination__list">
    <li class="pagination__item pagination__item--arrow">
      <a href="?page=4" class="pagination__link pagination__link--prev" rel="prev" aria-label="上一頁">
        <span class="pagination__chevron pagination__chevron--prev" aria-hidden="true"></span>
        <span>上一頁</span>
      </a>
    </li>
    <li class="pagination__item">
      <a href="?page=1" class="pagination__link" aria-label="第 1 頁">1</a>
    </li>
    <li class="pagination__item pagination__item--overflow" aria-label="省略中間頁碼">
      <span aria-hidden="true">…</span>
    </li>
    <li class="pagination__item">
      <a href="?page=4" class="pagination__link" aria-label="第 4 頁">4</a>
    </li>
    <li class="pagination__item">
      <a href="?page=5" class="pagination__link" aria-label="第 5 頁,目前頁面" aria-current="page">5</a>
    </li>
    <li class="pagination__item">
      <a href="?page=6" class="pagination__link" aria-label="第 6 頁">6</a>
    </li>
    <li class="pagination__item">
      <a href="?page=7" class="pagination__link" aria-label="第 7 頁">7</a>
    </li>
    <li class="pagination__item pagination__item--overflow" aria-label="省略後續頁碼">
      <span aria-hidden="true">…</span>
    </li>
    <li class="pagination__item pagination__item--arrow">
      <a href="?page=6" class="pagination__link pagination__link--next" rel="next" aria-label="下一頁">
        <span>下一頁</span>
        <span class="pagination__chevron pagination__chevron--next" aria-hidden="true"></span>
      </a>
    </li>
  </ul>
</nav>

簡易分頁

頁數很少時，可省略省略符號與「最後一頁」：

HTML
<nav aria-label="搜尋結果分頁" class="pagination">
  <ul class="pagination__list">
    <li class="pagination__item pagination__item--arrow">
      <a href="?page=1" class="pagination__link pagination__link--prev" rel="prev" aria-label="上一頁">
        <span class="pagination__chevron pagination__chevron--prev" aria-hidden="true"></span>
        <span>上一頁</span>
      </a>
    </li>
    <li class="pagination__item">
      <a href="?page=1" class="pagination__link" aria-label="第 1 頁">1</a>
    </li>
    <li class="pagination__item">
      <a href="?page=2" class="pagination__link" aria-label="第 2 頁,目前頁面" aria-current="page">2</a>
    </li>
    <li class="pagination__item">
      <a href="?page=3" class="pagination__link" aria-label="第 3 頁">3</a>
    </li>
    <li class="pagination__item pagination__item--arrow">
      <a href="?page=3" class="pagination__link pagination__link--next" rel="next" aria-label="下一頁">
        <span>下一頁</span>
        <span class="pagination__chevron pagination__chevron--next" aria-hidden="true"></span>
      </a>
    </li>
  </ul>
</nav>

CSS

  • .pagination：最外層 nav 容器。
  • .pagination__list：頁碼清單（ul）。
  • .pagination__item：單一頁碼項目（li）。
  • .pagination__item--arrow：上一頁、下一頁的項目。
  • .pagination__item--overflow：省略中間頁碼的項目，用以顯示「…」符號。
  • .pagination__link：頁碼連結（a）。
  • .pagination__link--prev、.pagination__link--next：上一頁、下一頁連結。

使用規範

  • 頁數較少時縮減元素：若總頁數少於 7 頁，應移除多餘的元素，僅顯示實際頁數。
  • 標示當前頁面：必須明確標示使用者當前所在的頁碼。
  • 首末頁隱藏箭頭：當位於第一頁時，隱藏「上一頁」連結；當位於最後一頁時，隱藏「下一頁」連結。
  • 鄰近頁面：在當前頁碼的左右兩側，必須始終顯示其相鄰的頁碼連結
  • 使用省略號標示缺失頁面：當頁碼序列不連續時，應使用省略符號來代表中間缺失的頁面。
  • 已知總頁數的省略位置：省略符號僅能出現在第一頁之後或最後一頁之前
  • 未知總頁數的省略位置：最後一個元素固定顯示為省略符號, 當頁碼進入第四頁以上時, 當前頁碼應固定出現在元件正中間

親和力

  • 使用 <nav> 元素並加上 aria-label（例如「搜尋結果分頁」），使其成為頁面地標（landmark），讓輔助科技使用者可快速定位。當頁面存在多組分頁時，務必以不同的 aria-label 加以區分。
  • 頁碼以 <ul>／<li> 原生清單語意呈現。
  • 每個頁碼連結透過 aria-label 補充完整語意。
  • 目前所在頁碼以 aria-current="page" 標示，並於 aria-label 附加「目前頁面」。
  • 上一頁、下一頁連結加上 rel="prev"、rel="next" 屬性，協助輔助科技理解頁面關係。
  • 與省略符號以 aria-hidden="true" 隱藏，避免干擾朗讀；省略項目本身則以 aria-label="省略中間頁碼" 補上有意義的說明。
  • 連結最小點擊區域不小於 2.5rem × 2.5rem。
  • 提供清楚的鍵盤焦點外觀。

參考資料