Cirrus

#Pagination

Cirrus comes with easy to style pagination menus that allow for easy navigation between pages in websites and forums.

#Short

This is the shortened variant of the pagination menu, which is what you typically expect to see in forums. Add the short class for all pagination-item.

To mark a pagination-item as selected, add the selected class.

To set an item as disabled, add the disabled attribute or disabled class on both the pagination-item and underlying a tag.

<div class="pagination">
    <div class="pagination-item short disabled"><a href="!#" class="disabled">Prev</a></div>
    <div class="pagination-item short selected"><a href="!#">1</a></div>
    <div class="pagination-item short"><a href="!#">2</a></div>
    <div class="pagination-item short"><a href="!#">3</a></div>
    <div class="pagination-item short"><a href="!#">4</a></div>
    <div class="pagination-item short"><a>...</a></div>
    <div class="pagination-item short"><a href="!#">13</a></div>
    <div class="pagination-item short"><a href="!#">Next</a></div>
</div>

A bordered also exists with the bordered class.

<div class="pagination pagination-bordered">
    <div class="pagination-item short"><a href="!#">Prev</a></div>
    <div class="pagination-item short"><a href="!#">1</a></div>
    <div class="pagination-item short"><a>...</a></div>
    <div class="pagination-item short"><a href="!#">3</a></div>
    <div class="pagination-item short"><a href="!#">4</a></div>
    <div class="pagination-item short selected"><a href="!#">5</a></div>
    <div class="pagination-item short"><a>...</a></div>
    <div class="pagination-item short"><a href="!#">23</a></div>
    <div class="pagination-item short"><a href="!#">Next</a></div>
</div>

#Prev/Next

This variant is exactly the same type of pagination used at the bottom of the page to direct users to the previous and next pages. This is just using the pagination-item classes by themselves. The pagination-prev and pagination-next are just helpers for text alignment.

<div class="pagination no-bullets">
    <div class="pagination-item pagination-prev">
        <a href="!#" class="u-block">
            <p class="pagination-item-subtitle">Previous</p>
            <h5 class="m-0">Choose Items</h5></a>
    </div>
    <div class="pagination-item pagination-next">
        <a href="!#" class="u-block">
            <p class="pagination-item-subtitle">Next</p>
            <h5 class="m-0">Order</h5></a>
    </div>
</div>