carbon-components/html/pagination-nav/pagination-nav--default--with-select.html

Carbon Components is a component library for IBM Cloud

<!-- 
  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="6" height="10" viewBox="0 0 6 10" aria-hidden="true"><path d="M0 5l5-5 .7.7L1.4 5l4.3 4.3-.7.7z"></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="6" height="10" viewBox="0 0 6 10" aria-hidden="true"><path d="M6 5l-5 5-.7-.7L4.6 5 .3.7 1 0z"></path></svg>
          </button>
      </li>
  </ul>
</nav>