Imperavi
Menu
Superkube

Pagination

This module helps to make the navigation through pages of content.

Usage #

Here's how to build page navigation. 


<nav class="pagination">
    <ul class="pagination-list">
        <li class="pagination-item active">
            <a href="#" class="pagination-link">1</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">2</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">3</a>
        </li>
    </ul>
</nav>

You can add Next and Previous links. 


<nav class="pagination">
    <ul class="pagination-list">
        <li class="pagination-item">
            <a href="#" class="pagination-link pagination-prev">&lt; Prev</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">1</a>
        </li>
        <li class="pagination-item active">
            <a href="#" class="pagination-link">2</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">3</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link pagination-next">Next &gt;</a>
        </li>
    </ul>
</nav>

Or make the page navigation only with Next and Previous links. 


<nav class="pagination">
    <ul class="pagination-list">
        <li class="pagination-item">
            <a href="#" class="pagination-link pagination-prev">&lt; Prev</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link pagination-next">Next &gt;</a>
        </li>
    </ul>
</nav>

Use pagination-ellipsis for range separators. 


<nav class="pagination">
    <ul class="pagination-list">
        <li class="pagination-item">
            <a href="#" class="pagination-link pagination-prev">&lt; Prev</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">1</a>
        </li>
        <li class="pagination-item">
            <span class="pagination-ellipsis">&hellip;</span>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">15</a>
        </li>
        <li class="pagination-item active">
            <a href="#" class="pagination-link">16</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">17</a>
        </li>
        <li class="pagination-item">
            <span class="pagination-ellipsis">&hellip;</span>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">28</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link pagination-next">Next &gt;</a>
        </li>
    </ul>
</nav>

Using the Push utility and push-right class you can center the page numbers. 


<nav class="pagination">
    <ul class="pagination-list">
        <li class="pagination-item">
            <a href="#" class="pagination-link pagination-prev">&lt; Prev</a>
        </li>
        <li class="pagination-item push-right">
            <a href="#" class="pagination-link">1</a>
        </li>
        <li class="pagination-item">
            <span class="pagination-ellipsis">&hellip;</span>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">15</a>
        </li>
        <li class="pagination-item active">
            <a href="#" class="pagination-link">16</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">17</a>
        </li>
        <li class="pagination-item">
            <span class="pagination-ellipsis">&hellip;</span>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">28</a>
        </li>
        <li class="pagination-item push-right">
            <a href="#" class="pagination-link pagination-next">Next &gt;</a>
        </li>
    </ul>
</nav>

Scales #

You can add your own size or change an existing one by creating a modifier and specifying new pagination parameters in your custom SCSS. 


.pagination-large {
    --pagination-font-size: 20px;
    --pagination-link-padding: 10px 16px;
}

Now you have a new pagination-large size modifier. 


<nav class="pagination pagination-large">...</nav>

Colors #

For the pagination module, you can override default colors. You can do this in your custom SCSS. See also how to customize the framework. 


.pagination {
    --pagination-link-color: var(--palette-white);
    --pagination-link-background-color: var(--palette-black);
    --pagination-link-border-color: var(--palette-transparent);

    --pagination-link-hover-color: var(--palette-white-80);
    --pagination-link-hover-background-color: var(--palette-active-base);
    --pagination-link-hover-border-color: var(--palette-transparent);

    --pagination-link-active-color: var(--palette-active-lightest);
    --pagination-link-active-background-color: var(--palette-active-base);
    --pagination-link-active-border-color: var(--palette-transparent);
}

The result will be the pagination with changed colors without modifiers. 


<nav class="pagination">...</nav>

Variants #

Variants help you change the different properties of a module. For example, the spacing between menu items, padding, and so on. This can be done by changing module variables. See also how to customize the framework. 


.pagination {
    --pagination-link-padding: 10px 16px;
    --pagination-link-border-width: 2px;
    --pagination-link-border-color: var(--palette-black);
    --pagination-link-hover-border-color: var(--palette-black);
}

If you apply the params above, the pagination will have bigger padding for links and a different border width and color than the default. 


<nav class="pagination">...</nav>

Variables #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module. 


// colors
--pagination-link-color: var(--palette-black);
--pagination-link-border-color: var(--palette-black-15);
--pagination-link-background-color: transparent;
--pagination-link-hover-color: var(--palette-black-60);
--pagination-link-hover-border-color: var(--palette-black-15);
--pagination-link-hover-background-color: var(--palette-active-lighter);
--pagination-link-active-color: var(--palette-active-lightest);
--pagination-link-active-border-color: var(--palette-active-base);
--pagination-link-active-background-color: var(--palette-active-base);

// vars
--pagination-font-size: 14px;
--pagination-item-space: 1rem;
--pagination-link-min-width: 32px;
--pagination-link-border-width: 1px;
--pagination-link-padding: 6px 8px;
--pagination-link-border-radius: var(--radius-base);