Pagination
The pagination component can be used to indicate a series of related content that exists across multiple pages, as well as the current active page.
Commenting
|
New message!
Jane Doe just sent you a new message.
|
The pagination component can be used to indicate a series of related content that exists across multiple pages, as well as the current active page.
<nav aria-label="Page navigation example">
<ul class="pagination">
<!-- Previous page -->
<li class="page-item">
<a href="#" class="page-link">
<i class="fa fa-angle-left" aria-hidden="true"></i>
<span class="sr-only">Previous</span> <!-- sr-only = only for screen readers -->
</a>
</li>
<!-- Pages and ellipses -->
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item ellipsis"></li>
<li class="page-item"><a href="#" class="page-link">45</a></li>
<!-- Active page item -->
<li class="page-item active" aria-current="page">
<a href="#" class="page-link" tabindex="-1">46</a>
</li>
<li class="page-item"><a href="#" class="page-link">47</a></li>
<li class="page-item ellipsis"></li>
<li class="page-item"><a href="#" class="page-link">86</a></li>
<!-- Next page -->
<li class="page-item">
<a href="#" class="page-link">
<i class="fa fa-angle-right" aria-hidden="true"></i>
<span class="sr-only">Next</span> <!-- sr-only = only for screen readers -->
</a>
</li>
</ul>
</nav>
The .active class on the .page-item indicates the current page. The .page-link element inside the active page item will be automatically "disabled" using the pointer-events: none property. This means that it is not really disabled, and can be accessed using the keyboard. For this reason, the tabindex="-1" attribute should be added to the link so that it is not accessible using the tab key.
The ellipses are added automatically in CSS using pseudo-elements if the .ellipsis class is present on the .page-item. On another note, the elements with the .sr-only class are only displayed on screen readers. Here, it gives sense in context to the icons. The icons being used are part of the Font Awesome 4.7.0 iconset.
Pagination elements can be aligned alternatively using utility classes. For example:
<!-- Aligned to center -->
<nav aria-label="...">
<ul class="pagination text-center">
...
</ul>
</nav>
<!-- Aligned to right -->
<nav aria-label="...">
<ul class="pagination text-right">
...
</ul>
</nav>
The ellipses and buttons inside the pagination element can also be rounded by adding the .pagination-rounded class to the pagination element.
<!-- Rounded pagination -->
<nav aria-label="...">
<ul class="pagination pagination-rounded">
...
</ul>
</nav>
Different sizes of pagination are also available:
<!-- Large pagination -->
<nav aria-label="...">
<ul class="pagination pagination-lg">
...
</ul>
</nav>
<!-- Small pagination -->
<nav aria-label="...">
<ul class="pagination pagination-sm">
...
</ul>
</nav>
The .disabled class can be added to a .page-item to "disable" the .page-link inside. Once again, the tabindex="-1" attribute should be added to the link so that it is not accessible using the tab key, because like the active link, it is not really disabled, it is only styled to look the part.
<nav aria-label="...">
<ul class="pagination">
<!-- Disabled page item -->
<li class="page-item disabled">
<a href="#" class="page-link w-50" tabindex="-1">Prev.</a> <!-- w-50 = width: 5rem (50px) -->
</li>
<!-- Active page item -->
<li class="page-item active">
<a href="#" class="page-link" tabindex="-1">1</a>
</li>
<li class="page-item" aria-current="page"><a href="#" class="page-link">2</a></li>
<li class="page-item" aria-current="page"><a href="#" class="page-link">3</a></li>
<li class="page-item">
<a href="#" class="page-link w-50">Next</a> <!-- w-50 = width: 5rem (50px) -->
</li>
</ul>
</nav>
Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.
However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.
The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)
The following is the normal tier, with a maximum of 10 sponsors.
AYCD
Automation Done Right
Sponsor (9 available)
Halfmoon needs your support! Become a sponsor to place an image and description of your product here. Click here
The following people have generously decided to support Halfmoon.
Become a backer on Patreon .