ページネーション／Pagination

コンテンツの一覧ページや検索結果ページなど、ページを複数に分割する場合に利用するナビゲーションです。

<div class="c-pagination">
  <div class="c-pagination__item c-pagination__item--controller">
    <button type="button" aria-label="最初のページ">
      <svg class="c-button__icon icon" aria-hidden="true" role="img">
        <use xlink:href="/assets/img/sprite.svg#chevron-line_left"></use>
      </svg>
    </button>
  </div>
  <div class="c-pagination__item c-pagination__item--controller">
    <button type="button" aria-label="前へ">
      <svg class="c-button__icon icon" aria-hidden="true" role="img">
        <use xlink:href="/assets/img/sprite.svg#chevron_left"></use>
      </svg>
    </button>
  </div>
  <div class="c-selectGroup">
    <select class="c-select" aria-label="表示するページ">
      <option value="">1 / 5</option>
      <option value="" selected="">2 / 5</option>
      <option value="">3 / 5</option>
      <option value="">4 / 5</option>
      <option value="">5 / 5</option>
    </select>
  </div>
  <div class="c-pagination__item c-pagination__item--controller">
    <button type="button" aria-label="次へ">
      <svg class="c-button__icon icon" aria-hidden="true" role="img">
        <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
      </svg>
    </button>
  </div>
  <div class="c-pagination__item c-pagination__item--controller">
    <button type="button" aria-label="最後のページ">
      <svg class="c-button__icon icon" aria-hidden="true" role="img">
        <use xlink:href="/assets/img/sprite.svg#chevron-line_right"></use>
      </svg>
    </button>
  </div>
</div>

原則

同一のコンテンツを2ページ以上に分割して表示する場合に利用します。