Zusty CSS Logo
Zusty CSS Logo
Version 1.2.0 is out now. Check out Release Notes.

Pagination

Basic, responsive styled pagination.


Structure

<nav class="zust-pagination" role="pagination" aria-label="Pagination Navigation">
  <a class="zust-btn" href="#!">Prevoius</a>
  <a class="zust-btn" href="#!">Next</a>

  <!-- `ul.zust-items` for items container -->
  <ul class="zust-items">
    <!-- Use <a> with class `zust-item` or attribute `item` for a styled anchor. -->
    <!-- Add attribute `active` or class `zust-active` to <a> for active item -->
    <li>
      <a class="zust-item" aria-label="Jump to page 1">1</a>
    </li>
    <li>
      <a item aria-label="Jump to page 2">2</a>
    </li>
    <li>&hellip;</li>
    <li>
      <a item aria-label="Jump to page 7">7</a>
    </li>
    <li>
      <a item active aria-label="Current page is 8">8</a>
    </li>
    <li>
      <a item aria-label="Jump to page 9">9</a>
    </li>
    <li>&hellip;</li>
    <li>
      <a item aria-label="Jump to page 15">15</a>
    </li>
    <li>
      <a item aria-label="Jump to page 16">16</a>
    </li>
  </ul>
</nav>

And that's all about pagination. Nothing more left for now to discuss.

checkSuccessfully Copied

Get involved in improving Zusty CSS.

Report a BugFeature Request

Support us by

Starring it on GitHubJoining our Discord ServerSharing on Twitter

Rapid Search Inside of Docs