UI Components

Pagination

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

Contents

Default Pagination

Simple pagination, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

<nav>
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous" class="pagination-prev">Previous</a>
        </li>
        <li>
            <a href="#">1</a>
        </li>
        <li>
            <a href="#">2</a>
        </li>
        <li>
            <a href="#">3</a>
        </li>
        <li>
            <a href="#">4</a>
        </li>
        <li>
            <a href="#">5</a>
        </li>
        <li>
            <a href="#" aria-label="Next"  class="pagination-next">Next</a>
        </li>
    </ul>
</nav>

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

<nav>
    <ul class="pagination">
        <li class="disabled ">
            <a href="#" aria-label="Previous" class="pagination-prev">Previous</a>
        </li>
        <li class="active">
            <a href="#">1</a>
        </li>
        <li>
            <a href="#">2</a>
        </li>
        <li>
            <a href="#">3</a>
        </li>
        <li>
            <a href="#">4</a>
        </li>
        <li>
            <a href="#">5</a>
        </li>
        <li>
            <a href="#" aria-label="Next"  class="pagination-next">Next</a>
        </li>
    </ul>
</nav>

Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It’s great for simple sites like blogs or magazines.

<nav>
    <ul class="pager">
        <li>
            <a href="#" class="pager-prev">Previous</a>
        </li>
        <li>
            <a href="#" class="pager-next">Next</a>
        </li>
    </ul>
</nav>

Alternatively, you can align each link to the sides:

<nav>
    <ul class="pager">
        <li class="previous">
            <a href="#" class="pager-prev">Older</a>
        </li>
        <li class="next">
            <a href="#" class="pager-next">Newer</a>
        </li>
    </ul>
</nav>

Optional disabled state

Pager links also use the general .disabled utility class from the pagination.

<nav>
    <ul class="pager">
        <li class="previous disabled">
            <a href="#" class="pager-prev">Older</a>
        </li>
        <li class="next">
            <a href="#" class="pager-next">Newer</a>
        </li>
    </ul>
</nav>
Menu