Getting Started
Layout
Components
Design
Pagination
Pagination is a technique used to divide content into multiple pages, with controls to navigate between the pages.
<nav class="null-pagination-container" role="navigation" aria-label="pagination">
<ul class="null-pagination null-display-flex null-align-items-center null-justify-content-center">
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow" href="javascript:void(null)" aria-label="Go to previous page" aria-disabled="true">Previous</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow" href="javascript:void(null)" aria-label="Go to page 1" aria-current="true">1</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow" href="javascript:void(null)" aria-label="Go to page 2" >2</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow" href="javascript:void(null)" aria-label="Go to page 3">3</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow" href="javascript:void(null)" aria-label="Go to page 4">4</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow" href="javascript:void(null)" aria-label="Go to page 5">5</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow" href="javascript:void(null)" aria-label="Go to next page">Next</a>
</li>
</ul><!--End null-pagination-->
</nav><!--End null-pagination-container-->
Use ".active" class to indicate that the user is in current page:
<nav class="null-pagination-container" role="navigation" aria-label="pagination">
<ul class="null-pagination null-display-flex null-align-items-center null-justify-content-center">
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow" href="javascript:void(null)" aria-label="Go to previous page">Previous</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow" href="javascript:void(null)" aria-label="Go to page 1" >1</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow" href="javascript:void(null)" aria-label="Go to page 2" >2</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow active" href="javascript:void(null)" aria-label="Go to page 3" aria-current="true">3</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow" href="javascript:void(null)" aria-label="Go to page 4">4</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow" href="javascript:void(null)" aria-label="Go to page 5">5</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow" href="javascript:void(null)" aria-label="Go to next page">Next</a>
</li>
</ul><!--End null-pagination-->
</nav><!--End null-pagination-container-->
Use ".disabled" to disable previous or next page:
<nav class="null-pagination-container" role="navigation" aria-label="pagination">
<ul class="null-pagination null-display-flex null-align-items-center null-justify-content-center">
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow disabled" href="javascript:void(null)" aria-label="Go to previous page" aria-disabled="true">Previous</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow active" href="javascript:void(null)" aria-label="Go to page 1" aria-current="true">1</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow" href="javascript:void(null)" aria-label="Go to page 2" >2</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow " href="javascript:void(null)" aria-label="Go to page 3">3</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow" href="javascript:void(null)" aria-label="Go to page 4">4</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow" href="javascript:void(null)" aria-label="Go to page 5">5</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow" href="javascript:void(null)" aria-label="Go to next page">Next</a>
</li>
</ul><!--End null-pagination-->
</nav><!--End null-pagination-container-->
Add ".null-pagination-rounded" to the element that has ".null-pagination" class, if you want to make border radius and a gap to the pagination:
<nav class="null-pagination-container" role="navigation" aria-label="pagination">
<ul class="null-pagination null-pagination-rounded null-display-flex null-align-items-center null-justify-content-center">
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow disabled" href="javascript:void(null)" aria-label="Go to previous page" aria-disabled="true">Previous</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow active" href="javascript:void(null)" aria-label="Go to page 1" aria-current="true">1</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow" href="javascript:void(null)" aria-label="Go to page 2" >2</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow " href="javascript:void(null)" aria-label="Go to page 3">3</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow" href="javascript:void(null)" aria-label="Go to page 4">4</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow" href="javascript:void(null)" aria-label="Go to page 5">5</a>
</li>
<li class="null-pagination-item">
<a class="null-pagination-item-link null-display-flex null-box-shadow" href="javascript:void(null)" aria-label="Go to next page">Next</a>
</li>
</ul><!--End null-pagination-->
</nav><!--End null-pagination-container-->