Government of
India
Powered by NeGD | MeitY Government of India® UX4G
Pagination
Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
Overview#
For pagination, there is a use of sizable block of interconnected links, making connections difficult to miss and easily scalable—all while delivering sizable hit regions. List HTML elements are used in pagination so that screen readers can announce the number of links that are currently available. For screen readers and other assistive technology to recognize it as a navigation section, use a wraparound <nav> element.
Additionally, it's important to include a descriptive aria-label for the <nav> to reflect its function because pages are likely to contain multiple instances of this type of navigation section. An appropriate name, for instance, may be aria-label="Search results pages" if the pagination component is being used to browse between a list of search results.
<nav aria-label="Page navigation example">
<ul class="pagination-flat">
<li class="page-item">
<a class="page-link preview disabled" href="#"><i class="fa fa-chevron-left"></i></a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link active" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">6</a></li>
<li class="page-item"><a class="page-link" href="#">7</a></li>
<li class="page-item"><a class="page-link" href="#">8</a></li>
<li class="page-item">
<a class="page-link next" href="#"><i class="fa fa-chevron-right"></i></a>
</li>
</ul>
</nav>
RESULT
<nav aria-label="Page navigation example">
<ul class="pagination-flat">
<li class="page-item">
<a class="page-link preview disabled" href="#"><i class="fa fa-chevron-left"></i></a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item">
<a class="page-link" data-bs-toggle="dropdown" aria-expanded="false" href="#"><span class="page-ellipsis">...</span></a>
<ul class="dropdown-menu">
<li><a class="dropdown-item active" href="#">1</a></li>
<li><a class="dropdown-item" href="#">2</a></li>
<li><a class="dropdown-item" href="#">3</a></li>
<li><a class="dropdown-item" href="#">4</a></li>
</ul>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link active" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">6</a></li>
<li class="page-item"><a class="page-link" href="#">7</a></li>
<li class="page-item">
<a class="page-link" data-bs-toggle="dropdown" aria-expanded="false" href="#"><span class="page-ellipsis">...</span></a>
<ul class="dropdown-menu">
<li><a class="dropdown-item active" href="#">1</a></li>
<li><a class="dropdown-item" href="#">2</a></li>
<li><a class="dropdown-item" href="#">3</a></li>
<li><a class="dropdown-item" href="#">4</a></li>
</ul>
</li>
<li class="page-item"><a class="page-link" href="#">8</a></li>
<li class="page-item">
<a class="page-link next" href="#"><i class="fa fa-chevron-right"></i></a>
</li>
</ul>
</nav>
RESULT
<nav aria-label="Page navigation example">
<ul class="pagination-flat">
<li class="page-item d-flex align-items-center gap-2">
<a class="page-link w-auto" href="#">Showing</a>
<div class="custom-select">
<div class="select-box">
<div class="selected">200</div>
<div class="options-container">
<div class="option" data-value="one">1</div>
<div class="option active" data-value="two">2</div>
<div class="option" data-value="three">3</div>
<div class="option" data-value="four">4</div>
<div class="option" data-value="five">5</div>
<div class="option" data-value="six">6</div>
<div class="option" data-value="seven">7</div>
</div>
</div>
</div>
<a class="page-link page-link w-auto" href="#">of 15000 items</a>
</li>
</ul>
</nav>
Custom dropdown select add this js for value change
document.querySelector(".selected").addEventListener("click", function () {
const optionsContainer = document.querySelector(".options-container");
optionsContainer.style.display = optionsContainer.style.display === "block" ? "none" : "block";
});
document.querySelectorAll(".option").forEach((option) => {
option.addEventListener("click", function () {
const selected = document.querySelector(".selected");
document.querySelectorAll(".option").forEach((opt) => {
opt.classList.remove("active");
});
option.classList.add("active");
selected.textContent = option.textContent;
document.querySelector(".options-container").style.display = "none";
});
});
RESULT
<nav aria-label="Page navigation example"><ul class="pagination"><li class="page-item"><a class="page-link" href="#">Previous</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">Next</a></li></ul></nav>
RESULT
Working with icons #
Looking to replace some of the wording in some pagination links with an icon or symbol? Be sure to use aria properties to properly support screen readers.
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>RESULT
Disabled and active states #
Pagination links can be tailored for various situations. For links that don't appear to be clickable, use .disabled, and for the page that is now being viewed, use .active.
While the .disabled class attempts to deactivate the link functionality of <a>s using pointer-events: none, that CSS property is not yet standardized and does not take into consideration keyboard navigation. As a result, developer should always use custom JavaScript to completely block the functionality of any disabled links and add tabindex="-1" to them.
<nav aria-label="..."><ul class="pagination"><li class="page-item disabled"><a class="page-link">Previous</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">Next</a></li></ul></nav>
RESULT
To remove click functionality and prevent keyboard focus while maintaining intended styles, developer can omit the anchor in the case of the prev/next arrows or substitute active or disabled anchors for <span>.
<nav aria-label="..."><ul class="pagination"><li class="page-item disabled"><span class="page-link">Previous</span></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active" aria-current="page"><span class="page-link">2</span></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">Next</a></li></ul></nav>
RESULT
Sizing #
Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.
<nav aria-label="..."><ul class="pagination pagination-lg"><li class="page-item active" aria-current="page"><span class="page-link">1</span></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li></ul></nav>
RESULT
<nav aria-label="..."><ul class="pagination pagination-sm"><li class="page-item active" aria-current="page"><span class="page-link">1</span></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li></ul></nav>
RESULT
Alignment #
Change the alignment of pagination components with flexbox utilities. For example, with .justify-content-center:
<nav aria-label="Page navigation example"><ul class="pagination justify-content-center"><li class="page-item disabled"><a class="page-link">Previous</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">Next</a></li></ul></nav>
RESULT
Or with .justify-content-end:
<nav aria-label="Page navigation example"><ul class="pagination justify-content-end"><li class="page-item disabled"><a class="page-link">Previous</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">Next</a></li></ul></nav>
RESULT
CSS #
Variables #
Added in v1.0.1Pagination now leverages local CSS variables on.pagination as part of UX4G's growing approach to CSS variables for improved real-time customisation. Sass is used to set the values for the CSS variables, therefore Sass customization is still available.
--#{$prefix}pagination-padding-x: #{$pagination-padding-x};
--#{$prefix}pagination-padding-y: #{$pagination-padding-y};
@include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
--#{$prefix}pagination-color: #{$pagination-color};
--#{$prefix}pagination-bg: #{$pagination-bg};
--#{$prefix}pagination-border-width: #{$pagination-border-width};
--#{$prefix}pagination-border-color: #{$pagination-border-color};
--#{$prefix}pagination-border-radius: #{$pagination-border-radius};
--#{$prefix}pagination-hover-color: #{$pagination-hover-color};
--#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
--#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
--#{$prefix}pagination-focus-color: #{$pagination-focus-color};
--#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
--#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
--#{$prefix}pagination-active-color: #{$pagination-active-color};
--#{$prefix}pagination-active-bg: #{$pagination-active-bg};
--#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
--#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
--#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
--#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
Sass variables #
$pagination-padding-y: .375rem;
$pagination-padding-x: .75rem;
$pagination-padding-y-sm: .25rem;
$pagination-padding-x-sm: .5rem;
$pagination-padding-y-lg: .75rem;
$pagination-padding-x-lg: 1.5rem;
$pagination-font-size: $font-size-base;
$pagination-color: var(--#{$prefix}link-color);
$pagination-bg: $white;
$pagination-border-radius: $border-radius;
$pagination-border-width: $border-width;
$pagination-margin-start: ($pagination-border-width * -1);
$pagination-border-color: $gray-300;
$pagination-focus-color: var(--#{$prefix}link-hover-color);
$pagination-focus-bg: $gray-200;
$pagination-focus-box-shadow: $input-btn-focus-box-shadow;
$pagination-focus-outline: 0;
$pagination-hover-color: var(--#{$prefix}link-hover-color);
$pagination-hover-bg: $gray-200;
$pagination-hover-border-color: $gray-300;
$pagination-active-color: $component-active-color;
$pagination-active-bg: $component-active-bg;
$pagination-active-border-color: $pagination-active-bg;
$pagination-disabled-color: $gray-600;
$pagination-disabled-bg: $white;
$pagination-disabled-border-color: $gray-300;
$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
$pagination-border-radius-sm: $border-radius-sm;
$pagination-border-radius-lg: $border-radius-lg;Sass mixins #
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
--#{$prefix}pagination-padding-x: #{$padding-x};
--#{$prefix}pagination-padding-y: #{$padding-y};
@include rfs($font-size, --#{$prefix}pagination-font-size);
--#{$prefix}pagination-border-radius: #{$border-radius};
}