Pagination

Use pagination elements to organize posts or other models of data into groups

Pagination example

The following example is the basic pagination style for Pixel:

<nav aria-label="Blog page navigation">
    <ul class="pagination">
        <li class="page-item">
            <a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-left"></span></a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item active">
            <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="#">4</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">5</a>
        </li>
        <li class="page-item">
            <a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-right"></span></a>
        </li>
    </ul>
</nav>

Disabled and active states

<nav aria-label="Templates page navigation">
    <ul class="pagination">
        <li class="page-item disabled">
            <a class="page-link" aria-label="first link" tabindex="-1" href="#">Previous</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item active">
            <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="#">4</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">5</a>
        </li>
        <li class="page-item">
            <a class="page-link" aria-label="first link" href="#">Next</a>
        </li>
    </ul>
</nav>

Sizing

Use the modifier classes .pagination-lg and .pagination-sm to change the size of the elements:

<nav aria-label="Default page navigation">
    <ul class="pagination pagination-lg">
        <li class="page-item">
            <a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-left"></span></a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item active">
            <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="#">4</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">5</a>
        </li>
        <li class="page-item">
            <a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-right"></span></a>
        </li>
    </ul>
</nav>
<nav aria-label="Themesberg page navigation">
    <ul class="pagination">
        <li class="page-item">
            <a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-left"></span></a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item active">
            <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="#">4</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">5</a>
        </li>
        <li class="page-item">
            <a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-right"></span></a>
        </li>
    </ul>
</nav>
<nav aria-label="Posts navigation example">
    <ul class="pagination pagination-sm">
        <li class="page-item">
            <a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-left"></span></a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item active">
            <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="#">4</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">5</a>
        </li>
        <li class="page-item">
            <a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-right"></span></a>
        </li>
    </ul>
</nav>