Pagination

Pagination is a technique used to divide content into multiple pages, with controls to navigate between the pages.

HTML |
    <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:

HTML |
<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:

HTML |
<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:

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