Theme Configurator

Header Options
Navbar Options

Material Style

Components Menu

Component Pagination

Basic Pagination

Flat Circle

Shaded Circle

Flat Rounded

Shaded Rounded

Flat Square

Shaded Square

<h3>Flat Circle</h3>
<nav aria-label="Page navigation">
    <ul class="pagination pagination-plain">
        <li>
            <a href="javascript:void(0)" aria-label="Previous">
                <span aria-hidden="true">«</span>
            </a>
        </li>
        <li class="active"><a href="javascript:void(0)">1</a></li>
        <li><a href="javascript:void(0)">2</a></li>
        <li><a href="javascript:void(0)">3</a></li>
        <li class="disabled"><a href="javascript:void(0)">4</a></li>
        <li><a href="javascript:void(0)">5</a></li>
        <li>
            <a href="javascript:void(0)" aria-label="Next">
                <span aria-hidden="true">»</span>
            </a>
        </li>
    </ul>
</nav>

<h3>Shaded Circle</h3>
<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <a href="javascript:void(0)" aria-label="Previous">
                <span aria-hidden="true">«</span>
            </a>
        </li>
        <li class="active"><a href="javascript:void(0)">1</a></li>
        <li><a href="javascript:void(0)">2</a></li>
        <li><a href="javascript:void(0)">3</a></li>
        <li class="disabled"><a href="javascript:void(0)">4</a></li>
        <li><a href="javascript:void(0)">5</a></li>
        <li>
            <a href="javascript:void(0)" aria-label="Next">
                <span aria-hidden="true">»</span>
            </a>
        </li>
    </ul>
</nav>

<h3>Flat Rounded</h3>
<nav aria-label="Page navigation">
    <ul class="pagination pagination-round pagination-plain">
        <li>
            <a href="javascript:void(0)" aria-label="Previous">
                <span aria-hidden="true">«</span>
            </a>
        </li>
        <li class="active"><a href="javascript:void(0)">1</a></li>
        <li><a href="javascript:void(0)">2</a></li>
        <li><a href="javascript:void(0)">3</a></li>
        <li class="disabled"><a href="javascript:void(0)">4</a></li>
        <li><a href="javascript:void(0)">5</a></li>
        <li>
            <a href="javascript:void(0)" aria-label="Next">
                <span aria-hidden="true">»</span>
            </a>
        </li>
    </ul>
</nav>

<h3>Shaded Rounded</h3>
<nav aria-label="Page navigation">
    <ul class="pagination pagination-round">
        <li>
            <a href="javascript:void(0)" aria-label="Previous">
                <span aria-hidden="true">«</span>
            </a>
        </li>
        <li class="active"><a href="javascript:void(0)">1</a></li>
        <li><a href="javascript:void(0)">2</a></li>
        <li><a href="javascript:void(0)">3</a></li>
        <li class="disabled"><a href="javascript:void(0)">4</a></li>
        <li><a href="javascript:void(0)">5</a></li>
        <li>
            <a href="javascript:void(0)" aria-label="Next">
                <span aria-hidden="true">»</span>
            </a>
        </li>
    </ul>
</nav>

<h3>Flat Square</h3>
<nav aria-label="Page navigation">
    <ul class="pagination pagination-square pagination-plain">
        <li>
            <a href="javascript:void(0)" aria-label="Previous">
                <span aria-hidden="true">«</span>
            </a>
        </li>
        <li class="active"><a href="javascript:void(0)">1</a></li>
        <li><a href="javascript:void(0)">2</a></li>
        <li><a href="javascript:void(0)">3</a></li>
        <li class="disabled"><a href="javascript:void(0)">4</a></li>
        <li><a href="javascript:void(0)">5</a></li>
        <li>
            <a href="javascript:void(0)" aria-label="Next">
                <span aria-hidden="true">»</span>
            </a>
        </li>
    </ul>
</nav>

<h3>Shaded Square</h3>
<nav aria-label="Page navigation">
    <ul class="pagination pagination-square">
        <li>
            <a href="javascript:void(0)" aria-label="Previous">
                <span aria-hidden="true">«</span>
            </a>
        </li>
        <li class="active"><a href="javascript:void(0)">1</a></li>
        <li><a href="javascript:void(0)">2</a></li>
        <li><a href="javascript:void(0)">3</a></li>
        <li class="disabled"><a href="javascript:void(0)">4</a></li>
        <li><a href="javascript:void(0)">5</a></li>
        <li>
            <a href="javascript:void(0)" aria-label="Next">
                <span aria-hidden="true">»</span>
            </a>
        </li>
    </ul>
</nav>

All colors variations

<nav aria-label="Page navigation">
    <ul class="pagination pagination-round pagination-plain pagination-success">
        <li>
            <a href="javascript:void(0)" aria-label="Previous">
                <span aria-hidden="true">«</span>
            </a>
        </li>
        <li class="active"><a href="javascript:void(0)">1</a></li>
        <li><a href="javascript:void(0)">2</a></li>
        <li><a href="javascript:void(0)">3</a></li>
        <li class="disabled"><a href="javascript:void(0)">4</a></li>
        <li><a href="javascript:void(0)">5</a></li>
        <li>
            <a href="javascript:void(0)" aria-label="Next">
                <span aria-hidden="true">»</span>
            </a>
        </li>
    </ul>
</nav>

Pager

<nav aria-label="...">
    <ul class="pager pager-flat">
        <li><a href="javascript:void(0)"><span aria-hidden="true">«</span> Previous</a></li>
        <li><a href="javascript:void(0)">Next <span aria-hidden="true">»</span></a></li>
    </ul>
</nav>


<nav aria-label="...">
    <ul class="pager">
        <li><a href="javascript:void(0)"><span aria-hidden="true">«</span> Previous</a></li>
        <li><a href="javascript:void(0)">Next <span aria-hidden="true">»</span></a></li>
    </ul>
</nav>

<nav aria-label="...">
    <ul class="pager pager-flat pager-info">
        <li><a href="javascript:void(0)"><span aria-hidden="true">«</span> Previous</a></li>
        <li><a href="javascript:void(0)">Next <span aria-hidden="true">»</span></a></li>
    </ul>
</nav>

Material Style

Social Links

12
4