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