CSS only

Pagination

Navigate paged content. SCSS-only: a ng-pagination nav wrapping a fixed-width ng-page-list of page elements.

Inside ng-page-list, place page elements — ng-page, ng-page-prev, ng-page-next and ng-ellipsis. Mark the current page is-active and unavailable controls is-disabled.

Basic

pagination.html

<nav class="ng-pagination " aria-label="Pagination">
    <div class="ng-page-list">
        <a href="#" class="ng-page-prev is-disabled" aria-label="Previous"><i class="ph ph-caret-left"></i></a>
        <a href="#" class="ng-page is-active">1</a>
        <a href="#" class="ng-page">2</a>
        <a href="#" class="ng-page">3</a>
        <span class="ng-ellipsis">…</span>
        <a href="#" class="ng-page">10</a>
        <a href="#" class="ng-page-next" aria-label="Next"><i class="ph ph-caret-right"></i></a>
    </div>
</nav>

Centered

Align with ng-pagination--left / --center / --right.

pagination.html

<nav class="ng-pagination ng-pagination--center" aria-label="Pagination">
    <div class="ng-page-list">
        <a href="#" class="ng-page-prev is-disabled" aria-label="Previous"><i class="ph ph-caret-left"></i></a>
        <a href="#" class="ng-page is-active">1</a>
        <a href="#" class="ng-page">2</a>
        <a href="#" class="ng-page">3</a>
        <span class="ng-ellipsis">…</span>
        <a href="#" class="ng-page">10</a>
        <a href="#" class="ng-page-next" aria-label="Next"><i class="ph ph-caret-right"></i></a>
    </div>
</nav>

Sizes

ng-pagination-sm and ng-pagination-lg.

pagination.html

<nav class="ng-pagination ng-pagination-sm" aria-label="Pagination">
    <div class="ng-page-list">
        <a href="#" class="ng-page-prev is-disabled" aria-label="Previous"><i class="ph ph-caret-left"></i></a>
        <a href="#" class="ng-page is-active">1</a>
        <a href="#" class="ng-page">2</a>
        <a href="#" class="ng-page">3</a>
        <span class="ng-ellipsis">…</span>
        <a href="#" class="ng-page">10</a>
        <a href="#" class="ng-page-next" aria-label="Next"><i class="ph ph-caret-right"></i></a>
    </div>
</nav>
<nav class="ng-pagination ng-pagination-lg" aria-label="Pagination">
    <div class="ng-page-list">
        <a href="#" class="ng-page-prev is-disabled" aria-label="Previous"><i class="ph ph-caret-left"></i></a>
        <a href="#" class="ng-page is-active">1</a>
        <a href="#" class="ng-page">2</a>
        <a href="#" class="ng-page">3</a>
        <span class="ng-ellipsis">…</span>
        <a href="#" class="ng-page">10</a>
        <a href="#" class="ng-page-next" aria-label="Next"><i class="ph ph-caret-right"></i></a>
    </div>
</nav>

Anatomy

ng-pagination ng-page-list ng-page ng-page-prev ng-page-next ng-page-first ng-page-last ng-ellipsis

States & variants

is-active is-disabled ng-pagination--center ng-pagination--right ng-pagination-sm ng-pagination-lg

Reference

Generated from the component source (_ng_pagination.scss).

Component info

Name	`Pagination`
Type	`css`
Version	`1.0.0`
Status	`css`
CSS	`/assets/css/components/_ng_pagination.scss`

Classes

.ng-ellipsis .ng-page .ng-page-first .ng-page-last .ng-page-list .ng-page-next .ng-page-prev .ng-page-size .ng-pagination .ng-pagination--center .ng-pagination--left .ng-pagination--right .ng-pagination-lg .ng-pagination-sm .ng-select

Tokens

--ng-pagination-active-bg --ng-pagination-active-color --ng-pagination-bg --ng-pagination-border --ng-pagination-font-size --ng-pagination-gap --ng-pagination-hover --ng-pagination-margin-y --ng-pagination-size