Paginations
Tailwind CSS and Alpine JS Pagination
Pagination is a great way to display a large number of pages in a visually appealing format. You can use it to indicate the current page, navigate to the next or previous page, and more.
Default pagination
A simple pagination with previous and next buttons.
HTML
<nav aria-label="pagination">
<ul class="">
<li>
<a href="#" class="" aria-label="previous page">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="">
<path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
</svg>
Previous
</a>
</li>
<li><a href="#" class="" aria-label="page 1">1</a></li>
<li><a href="#" class="" aria-current="page" aria-label="page 2">2</a></li>
<li><a href="#" class="" aria-label="page 3">3</a></li>
<li><a href="#" class="" aria-label="page 4">4</a></li>
<li>
<a href="#" class="" aria-label="next page">
Next
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="">
<path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
</svg>
</a>
</li>
</ul>
</nav>
Pagination with ellipsis
A simple pagination with previous, next, and ellipsis buttons.
HTML
<nav aria-label="pagination">
<ul class="">
<li>
<a href="#" class="" aria-label="previous page">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="">
<path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
</svg>
Previous
</a>
</li>
<li><a href="#" class="" aria-label="page 1">1</a></li>
<li><a href="#" class="" aria-current="page" aria-label="page 2">2</a></li>
<li>
<a href="#" class="" aria-label="more pages">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true" stroke="currentColor" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
</svg>
</a>
</li>
<li><a href="#" class="" aria-label="page 29">29</a></li>
<li><a href="#" class="" aria-label="page 30">30</a></li>
<li>
<a href="#" class="" aria-label="next page">
Next
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="">
<path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
</svg>
</a>
</li>
</ul>
</nav>
Pagination with next & preview
A pagination with next and previous buttons.
HTML
<nav aria-label="pagination">
<ul class="">
<li>
<a href="#" class="" aria-label="previous page">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="">
<path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
</svg>
Previous
</a>
</li>
<li>
<a href="#" class="" aria-label="next page">
Next
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="">
<path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
</svg>
</a>
</li>
</ul>
</nav>
Keyboard Navigation
| Key | Action |
|---|---|
| Tab |
Next focusable element gets the focus |
| Space Enter | Focused item gets selected |