- Home
- Components
- Pagination
Pagination
The pagination component provides a way to indicate that a series of related content exists across multiple pages.
<nav aria-label="Page navigation example">
<ul class="pagination pagination-sm ">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true" class="material-icons">first_page</span>
<span class="sr-only">First</span>
</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true" class="material-icons">chevron_left</span>
<span class="sr-only">Prev</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#" aria-label="1">
<span>1</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="2">
<span>2</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span class="sr-only">Next</span>
<span aria-hidden="true" class="material-icons">chevron_right</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span class="sr-only">Last</span>
<span aria-hidden="true" class="material-icons">last_page</span>
</a>
</li>
</ul>
</nav>
Labels
<nav aria-label="Page navigation example">
<ul class="pagination pagination-sm ">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true" class="material-icons">chevron_left</span>
<span>Prev</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#" aria-label="1">
<span>1</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="2">
<span>2</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span>Next</span>
<span aria-hidden="true" class="material-icons">chevron_right</span>
</a>
</li>
</ul>
</nav>
Huma
Huma is a beautifully crafted user interface for modern Business Admin Web Applications, with examples for many pages needed for Customer Relationship Management, Enterprise Resource Planning, Human Resources, Content Management System, Project Management, Tasks, eCommerce, Messaging and Account Management.