Navigation
Pagination
Use .quanta-pagination with .quanta-pagination-item and .quanta-pagination-link to build paginated navigation.
<ul class="quanta-pagination quanta-pagination-center">
<li class="quanta-pagination-item quanta-pagination-prev">
<a class="quanta-pagination-link" href="#">« Previous</a>
</li>
<li class="quanta-pagination-item"><a class="quanta-pagination-link" href="#">1</a></li>
<li class="quanta-pagination-item"><a class="quanta-pagination-link" href="#">2</a></li>
<li class="quanta-pagination-item"><a class="quanta-pagination-link active" href="#">3</a></li>
<li class="quanta-pagination-item"><a class="quanta-pagination-link" href="#">4</a></li>
<li class="quanta-pagination-item quanta-pagination-next">
<a class="quanta-pagination-link" href="#">Next »</a>
</li>
</ul>Disabled & Active States
Add .disabled to disable links, and .active to highlight the current page.
<ul class="quanta-pagination">
<li class="quanta-pagination-item disabled">
<a class="quanta-pagination-link disabled" href="#" tabindex="-1">Previous</a>
</li>
<li class="quanta-pagination-item"><a class="quanta-pagination-link" href="#">1</a></li>
<li class="quanta-pagination-item active">
<a class="quanta-pagination-link active" href="#">2</a>
</li>
<li class="quanta-pagination-item"><a class="quanta-pagination-link" href="#">3</a></li>
</ul>Utility Classes
Alignment and wrap helpers let you customize layout:
.quanta-pagination-start, .quanta-pagination-end, .quanta-pagination-space-between,
.quanta-pagination-no-wrap, etc.
<ul class="quanta-pagination quanta-pagination-end quanta-pagination-no-wrap">…</ul>