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 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></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 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></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 23L11 16 19 9 19 23z"></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 9L21 16 13 23 13 9z"></path></svg>
</button>
</div>
</div>
Disabled pagination buttons
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 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></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 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></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 23L11 16 19 9 19 23z"></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 9L21 16 13 23 13 9z"></path></svg>
</button>
</div>
</div>
Pagination nav
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 4 5 0z"></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 0 8z"></path></svg>
</button>
</li>
</ul>
</nav>
Pagination nav with select
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 4 5 0z"></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 0 8z"></path></svg>
</button>
</li>
</ul>
</nav>
Pagination nav as anchor tags
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 4 5 0z"></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 0 8z"></path></svg>
</a>
</li>
</ul>
</nav>