Pagination

Items per page:

1–10 of 40 items

of 5 pages

Code:

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="bx--pagination" data-pagination>
  <div class="bx--pagination__left">
    <label id="select-id-pagination-count-label"
      class="bx--pagination__text"
      for="select-id-pagination-count">
      Items per page:
    </label>
    <div class="bx--select bx--select--inline bx--select__item-count">
      <select class="bx--select-input"
        id="select-id-pagination-count"
        aria-label="Items per page" tabindex="0" data-items-per-page>
          <option class="bx--select-option" value="10">
            10
          </option>
          <option class="bx--select-option" value="20">
            20
          </option>
          <option class="bx--select-option" value="30">
            30
          </option>
          <option class="bx--select-option" value="40">
            40
          </option>
          <option class="bx--select-option" value="50">
            50
          </option>
      </select>
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
    </div>
    <span class="bx--pagination__text">
      <span data-displayed-item-range>1–10</span> of
      <span data-total-items>
          40
      </span> items
    </span>
  </div>
  <div class="bx--pagination__right">
    <div class="bx--select bx--select--inline bx--select__page-number">
      <select class="bx--select-input"
        id="select-id-pagination-page"
        aria-label="page number, of 5 pages" tabindex="0" data-page-number-input>
          <option class="bx--select-option" value="1">
            1
          </option>
          <option class="bx--select-option" value="2">
            2
          </option>
          <option class="bx--select-option" value="3">
            3
          </option>
          <option class="bx--select-option" value="4">
            4
          </option>
          <option class="bx--select-option" value="5">
            5
          </option>
      </select>
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
    </div>
    <label id="select-id-pagination-page-label"
      class="bx--pagination__text"
      for="select-id-pagination-page">
      of 5 pages
    </label>
    <button
      class="bx--pagination__button bx--pagination__button--backward "
      tabindex="0" data-page-backward aria-label="previous page">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination__nav-arrow" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M19 23l-8-7 8-7v14z"></path></svg>
    </button>
    <button
      class="bx--pagination__button bx--pagination__button--forward "
      tabindex="0" data-page-forward aria-label="next page">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination__nav-arrow" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M13 9l8 7-8 7V9z"></path></svg>
    </button>
  </div>
</div>

Items per page:

1–10 of 10 items

of 1 pages

Code:

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="bx--pagination" data-pagination>
  <div class="bx--pagination__left">
    <label id="select-id-pagination-count-label--disabled-example"
      class="bx--pagination__text"
      for="select-id-pagination-count--disabled-example">
      Items per page:
    </label>
    <div class="bx--select bx--select--inline bx--select__item-count">
      <select class="bx--select-input"
        id="select-id-pagination-count--disabled-example"
        aria-label="Items per page" tabindex="0" data-items-per-page>
          <option class="bx--select-option" value="10">
            10
          </option>
      </select>
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
    </div>
    <span class="bx--pagination__text">
      <span data-displayed-item-range>1–10</span> of
      <span data-total-items>
          10
      </span> items
    </span>
  </div>
  <div class="bx--pagination__right">
    <div class="bx--select bx--select--inline bx--select__page-number">
      <select class="bx--select-input"
        id="select-id-pagination-page--disabled-example"
        aria-label="page number, of 1 pages" tabindex="0" data-page-number-input>
          <option class="bx--select-option" value="1">
            1
          </option>
      </select>
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--select__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
    </div>
    <label id="select-id-pagination-page-label--disabled-example"
      class="bx--pagination__text"
      for="select-id-pagination-page--disabled-example">
      of 1 pages
    </label>
    <button
      class="bx--pagination__button bx--pagination__button--backward bx--pagination__button--no-index"
      tabindex="0" data-page-backward aria-label="previous page">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination__nav-arrow" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M19 23l-8-7 8-7v14z"></path></svg>
    </button>
    <button
      class="bx--pagination__button bx--pagination__button--forward bx--pagination__button--no-index"
      tabindex="0" data-page-forward aria-label="next page">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination__nav-arrow" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M13 9l8 7-8 7V9z"></path></svg>
    </button>
  </div>
</div>

Documentation

SCSS

Modifiers

Use these modifiers with .bx--pagination__button class.

Selector	Description
`.bx--pagination__button--backward`	Applies styles for backward button
`.bx--pagination__button--forward`	Applies styles for forward button
`.bx--pagination__button--no-index`	Applies styles for disabled button

JavaScript

Options

Option	Default Selector	Description
`selectorInit`	`[data-pagination]`	The selector to find the pagination
`selectorItemsPerPageInput`	`[data-items-per-page]`	The selector to find the input that determines the number of items per page.
`selectorPageNumberInput`	`[data-page-number-input]`	The selector to find the input that changes the page displayed.
`selectorPageBackward`	`[data-page-backward]`	The selector to find the button that goes back a page.
`selectorPageForward`	`[data-page-forward]`	The selector to find the button that goes forward a page.

Events

Name	Default Value	Description
`eventItemsPerPage`	`itemsPerPage`	Custom event fired when a user changes the number of items per page. event.detail.value contains the number of items a user wishes to see.
`eventPageNumber`	`pageNumber`	The name of the custom event fired when a user inputs a specific page number. event.detail.value contains the value that the user input.
`eventPageChange`	`pageChange`	The name of the custom event fired when a user goes forward or backward a page. event.detail.direction contains the direction a user wishes to go.

Edit this page on GitHub

Components: Overflow menu

Pagination: Usage