Pagination

Add pagination to posts or extended elements to help break up your content with the mesh pagination component.

Usage

Pagination is an ordinal numbering of pages, which is usually located at the top or bottom of the site pages. It makes it easier for the user to navigate through your website. mesh's pagination comes with prev/next buttons or arrows.

Notation:

In order to use pagination with mesh you need to wrap the parent with a pagination class, and the children (pagination items) with a page-item class.
Be sure to add the active class to the page where the user currently is. This will give the current active page item a background color and box shadow.
Note: It is reccomended you use the </ul> and </li> semantic tags with pagination.

Example:

<ul class="pagination">
    <li class="page-item active"><a href="#!">1</a></li>
    <li class="page-item"><a href="#!">2</a></li>
    <li class="page-item"><a href="#!">3</a></li>
    <li class="page-item"><a href="#!">4</a></li>
    <li class="page-item"><a href="#!">5</a></li>
</ul>

Prev/Next

To add previous and next buttons to the pagination, add the prev-btn class on the first page-item and the next-btn class on the last page-item.

<ul class="pagination">
    <li class="page-item prev-btn"><a href="#!">Prev</a></li>
    <li class="page-item active"><a href="#!">1</a></li>
    <li class="page-item"><a href="#!">2</a></li>
    <li class="page-item"><a href="#!">3</a></li>
    <li class="page-item"><a href="#!">4</a></li>
    <li class="page-item"><a href="#!">5</a></li>
    <li class="page-item next-btn"><a href="#!">Next</a></li>
</ul>

Arrow

If you don't like the prev/next buttons and prefer to use arrows instead, use the prev-arrow class on the first page-item and the next-arrow class on the last page-item.
Ensure to add the HTML code ‹ for the left arrow and › for the right arrow, in the <a> tag.

<ul class="pagination">
    <li class="page-item prev-arrow"><a href="#!">&#8249;</a></li>
    <li class="page-item active"><a href="#!">1</a></li>
    <li class="page-item"><a href="#!">2</a></li>
    <li class="page-item"><a href="#!">3</a></li>
    <li class="page-item"><a href="#!">4</a></li>
    <li class="page-item"><a href="#!">5</a></li>
    <li class="page-item next-arrow"><a href="#!">&#8250;</a></li>
</ul>

Variables

Enable rectangular active classes and choose to customise the colors and font sizes of the pagination component.

Variable	Value	Description
`$pagination-enable-shadow: true;`	Boolean	Enables/disables pagination shadow of the active element.
`$pagination-rounded: true;`	Boolean	Enables/disables rounded pagination, use false for square.
`$pagination-height: 30px;`	Pixel/em/rem	Pagination container height in pixels, em's or rem's.
`$pagination-text-color: #999;`	Color	Pagination text color.
`$pagination-active-color: color('primary');`	Color	Pagination active class color, by default it uses primary from the color palette.
`$pagination-font-size: 12px;`	Pixel/em/rem	Pagination font size.