Pagination

Pagination

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>

Disabled pagination buttons

Vanilla JS
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>

Pagination nav

Vanilla JS
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.
-->

<nav class="bx--pagination-nav" aria-label="pagination" data-pagination-nav>
  <ul class="bx--pagination-nav__list">
      <li class="bx--pagination-nav__list-item">
          <button
            class="bx--pagination-nav__page bx--pagination-nav__page--direction  bx--pagination-nav__page--disabled"
            data-page-previous
              aria-disabled="true"
          >
          <span class="bx--pagination-nav__accessibility-label">Previous page </span>
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination-nav__icon" width="5" height="8" viewBox="0 0 5 8" aria-hidden="true"><path d="M5 8L0 4l5-4z"></path></svg>
          </button>
      </li>
      <li class="bx--pagination-nav__list-item">
            <button
              class="bx--pagination-nav__page bx--pagination-nav__page--active bx--pagination-nav__page--disabled"
              data-page="1"
              data-page-button
                data-page-active="true"
                aria-current="page"
                aria-disabled="true"
            >
            <span class="bx--pagination-nav__accessibility-label">page </span>1
            </button>
      </li>
      <li class="bx--pagination-nav__list-item">
            <button
              class="bx--pagination-nav__page"
              data-page="2"
              data-page-button
            >
            <span class="bx--pagination-nav__accessibility-label">page </span>2
            </button>
      </li>
      <li class="bx--pagination-nav__list-item">
            <button
              class="bx--pagination-nav__page"
              data-page="3"
              data-page-button
            >
            <span class="bx--pagination-nav__accessibility-label">page </span>3
            </button>
      </li>
      <li class="bx--pagination-nav__list-item">
            <button
              class="bx--pagination-nav__page"
              data-page="4"
              data-page-button
            >
            <span class="bx--pagination-nav__accessibility-label">page </span>4
            </button>
      </li>
      <li class="bx--pagination-nav__list-item">
            <button
              class="bx--pagination-nav__page"
              data-page="5"
              data-page-button
            >
            <span class="bx--pagination-nav__accessibility-label">page </span>5
            </button>
      </li>
      <li class="bx--pagination-nav__list-item">
          <button
            class="bx--pagination-nav__page bx--pagination-nav__page--direction"
            data-page-next
          >
          <span class="bx--pagination-nav__accessibility-label">Next page </span>
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination-nav__icon" width="5" height="8" viewBox="0 0 5 8" aria-hidden="true"><path d="M0 0l5 4-5 4z"></path></svg>
          </button>
      </li>
  </ul>
</nav>

Pagination nav with select

Vanilla JS
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.
-->

<nav class="bx--pagination-nav" aria-label="pagination" data-pagination-nav>
  <ul class="bx--pagination-nav__list">
      <li class="bx--pagination-nav__list-item">
          <button
            class="bx--pagination-nav__page bx--pagination-nav__page--direction "
            data-page-previous
          >
          <span class="bx--pagination-nav__accessibility-label">Previous page </span>
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination-nav__icon" width="5" height="8" viewBox="0 0 5 8" aria-hidden="true"><path d="M5 8L0 4l5-4z"></path></svg>
          </button>
      </li>
      <li class="bx--pagination-nav__list-item">
            <button
              class="bx--pagination-nav__page"
              data-page="1"
              data-page-button
            >
            <span class="bx--pagination-nav__accessibility-label">page </span>1
            </button>
      </li>
      <li class="bx--pagination-nav__list-item">
            <button
              class="bx--pagination-nav__page"
              data-page="2"
              data-page-button
            >
            <span class="bx--pagination-nav__accessibility-label">page </span>2
            </button>
      </li>
      <li class="bx--pagination-nav__list-item">
            <button
              class="bx--pagination-nav__page bx--pagination-nav__page--active bx--pagination-nav__page--disabled"
              data-page="3"
              data-page-button
                data-page-active="true"
                aria-current="page"
                aria-disabled="true"
            >
            <span class="bx--pagination-nav__accessibility-label">page </span>3
            </button>
      </li>
      <li class="bx--pagination-nav__list-item">
            <button
              class="bx--pagination-nav__page"
              data-page="4"
              data-page-button
            >
            <span class="bx--pagination-nav__accessibility-label">page </span>4
            </button>
      </li>
      <li class="bx--pagination-nav__list-item">
            <button
              class="bx--pagination-nav__page"
              data-page="5"
              data-page-button
            >
            <span class="bx--pagination-nav__accessibility-label">page </span>5
            </button>
      </li>
      <li class="bx--pagination-nav__list-item">
          <div class="bx--pagination-nav__select">
            <select
              class="bx--pagination-nav__page bx--pagination-nav__page--select"
              data-page-select
              aria-label="select page number"
            >
                <option
                  value=""
                    hidden
                >
                  
                </option>
                <option
                  value="6"
                    data-page="6"
                >
                  6
                </option>
                <option
                  value="7"
                    data-page="7"
                >
                  7
                </option>
                <option
                  value="8"
                    data-page="8"
                >
                  8
                </option>
                <option
                  value="9"
                    data-page="9"
                >
                  9
                </option>
            </select>
            <div class="bx--pagination-nav__select-icon-wrapper">
              <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination-nav__select-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="3" cy="8" r="1"></circle><circle cx="8" cy="8" r="1"></circle><circle cx="13" cy="8" r="1"></circle></svg>
            </div>
          </div>
      </li>
      <li class="bx--pagination-nav__list-item">
            <button
              class="bx--pagination-nav__page"
              data-page="10"
              data-page-button
            >
            <span class="bx--pagination-nav__accessibility-label">page </span>10
            </button>
      </li>
      <li class="bx--pagination-nav__list-item">
          <button
            class="bx--pagination-nav__page bx--pagination-nav__page--direction"
            data-page-next
          >
          <span class="bx--pagination-nav__accessibility-label">Next page </span>
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination-nav__icon" width="5" height="8" viewBox="0 0 5 8" aria-hidden="true"><path d="M0 0l5 4-5 4z"></path></svg>
          </button>
      </li>
  </ul>
</nav>

Pagination nav as anchor tags

Vanilla JS
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.
-->

<nav class="bx--pagination-nav" aria-label="pagination" data-pagination-nav>
  <ul class="bx--pagination-nav__list">
      <li class="bx--pagination-nav__list-item">
          <a
            class="bx--pagination-nav__page bx--pagination-nav__page--direction bx--pagination-nav__page--disabled"
            data-page-previous
            href="javascript:void(0)"
              aria-disabled="true"
          >
          <span class="bx--pagination-nav__accessibility-label">Previous page </span>
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination-nav__icon" width="5" height="8" viewBox="0 0 5 8" aria-hidden="true"><path d="M5 8L0 4l5-4z"></path></svg>
          </a>
      </li>
      <li class="bx--pagination-nav__list-item">
            <a
              class="bx--pagination-nav__page bx--pagination-nav__page--active bx--pagination-nav__page--disabled"
              data-page="1"
              data-page-button
              href="javascript:void(0)"
                data-page-active="true"
                aria-current="page"
                aria-disabled="true"
            >
            <span class="bx--pagination-nav__accessibility-label">page </span>1
            </a>
      </li>
      <li class="bx--pagination-nav__list-item">
            <a
              class="bx--pagination-nav__page"
              data-page="2"
              data-page-button
              href="javascript:void(0)"
            >
            <span class="bx--pagination-nav__accessibility-label">page </span>2
            </a>
      </li>
      <li class="bx--pagination-nav__list-item">
            <a
              class="bx--pagination-nav__page"
              data-page="3"
              data-page-button
              href="javascript:void(0)"
            >
            <span class="bx--pagination-nav__accessibility-label">page </span>3
            </a>
      </li>
      <li class="bx--pagination-nav__list-item">
            <a
              class="bx--pagination-nav__page"
              data-page="4"
              data-page-button
              href="javascript:void(0)"
            >
            <span class="bx--pagination-nav__accessibility-label">page </span>4
            </a>
      </li>
      <li class="bx--pagination-nav__list-item">
            <a
              class="bx--pagination-nav__page"
              data-page="5"
              data-page-button
              href="javascript:void(0)"
            >
            <span class="bx--pagination-nav__accessibility-label">page </span>5
            </a>
      </li>
      <li class="bx--pagination-nav__list-item">
          <a
            class="bx--pagination-nav__page bx--pagination-nav__page--direction"
            data-page-next
            href="javascript:void(0)"
          >
          <span class="bx--pagination-nav__accessibility-label">Next page </span>
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--pagination-nav__icon" width="5" height="8" viewBox="0 0 5 8" aria-hidden="true"><path d="M0 0l5 4-5 4z"></path></svg>
          </a>
      </li>
  </ul>
</nav>

Pagination 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.

Pagination nav documentation

SCSS

Modifiers

Use these modifiers with .bx--pagination-nav class.

Selector Description
.bx--pagination-nav--active Applies active styles to page element
.bx--pagination-nav--disabled Applies disabled styles to page element when using anchor links
.bx--pagination-nav__page--select Applies select override styles to page element
.bx--pagination-nav__page--direction Applies previous/next button styles to page element

JavaScript

Options

Option Default Selector Description
selectorInit [data-pagination-nav] The selector to find the pagination nav.
selectorPageElement [data-page] The data attribute to find page elements.
selectorPageButton [data-page-button] The data attribute to find page ui elements.
selectorPagePrevious [data-page-previous] The selector to find the 'previous' ui element.
selectorPageNext [data-page-next] The selector to find the 'next' ui element.
selectorPageSelect [data-page-select] The selector to find the overflow select element.
selectorPageActive [data-page-active="true"] The data attribute to find active page element.
attribPage data-page The data attribute key for accessing page number.
attribActive data-page-active The data attribute key for accessing active page element.
classActive bx--pagination-nav__page--active The CSS class for pages's selected state.
classDisabled bx--pagination-nav__page--disabled The CSS class for pages's disabled state.