The Pagination component enables the user to navigate pages in an ordered sequence, for example, search results pages or data table rows. Pagination provides links to the first page, last page, previous page, next page, and numbered pages in the sequence.
The pagination component can be placed at the bottom of the content, left-aligned, centered, or right-aligned.
<ul class="luci-pagination">
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link luci-pagination__link--previous">
<svg class="luci-icon luci-link__icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#navigate-back"> </use>
</svg> Previous
<span class="luci-pagination__label-hidden" aria-hidden="true">Page</span>
</a>
</li>
<li class="luci-pagination__item">
<a href="" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 1 </a>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 2 </a>
</li>
<li class="luci-pagination__item">
<div class="luci-pagination__link luci-pagination__link--current">
<span class="luci-pagination__label-hidden" aria-hidden="true">(current)</span>
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 3 </div>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 4 </a>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 5 </a>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link luci-pagination__link--next"> Next
<svg class="luci-icon luci-link__icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#navigate-forward"> </use>
</svg>
<span class="luci-pagination__label-hidden" aria-hidden="true">Page</span>
</a>
</li>
</ul>
<ul class="luci-pagination luci-pagination--centered">
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link luci-pagination__link--previous">
<svg class="luci-icon luci-link__icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#navigate-back"> </use>
</svg> Previous
<span class="luci-pagination__label-hidden" aria-hidden="true">Page</span>
</a>
</li>
<li class="luci-pagination__item">
<a href="" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 1 </a>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 2 </a>
</li>
<li class="luci-pagination__item">
<div class="luci-pagination__link luci-pagination__link--current">
<span class="luci-pagination__label-hidden" aria-hidden="true">(current)</span>
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 3 </div>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 4 </a>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 5 </a>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link luci-pagination__link--next"> Next
<svg class="luci-icon luci-link__icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#navigate-forward"> </use>
</svg>
<span class="luci-pagination__label-hidden" aria-hidden="true">Page</span>
</a>
</li>
</ul>
<ul class="luci-pagination luci-pagination--right-aligned">
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link luci-pagination__link--previous">
<svg class="luci-icon luci-link__icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#navigate-back"> </use>
</svg> Previous
<span class="luci-pagination__label-hidden" aria-hidden="true">Page</span>
</a>
</li>
<li class="luci-pagination__item">
<a href="" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 1 </a>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 2 </a>
</li>
<li class="luci-pagination__item">
<div class="luci-pagination__link luci-pagination__link--current">
<span class="luci-pagination__label-hidden" aria-hidden="true">(current)</span>
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 3 </div>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 4 </a>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 5 </a>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link luci-pagination__link--next"> Next
<svg class="luci-icon luci-link__icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#navigate-forward"> </use>
</svg>
<span class="luci-pagination__label-hidden" aria-hidden="true">Page</span>
</a>
</li>
</ul>
<ul class="luci-pagination">
<li class="luci-pagination__item">
<div class="luci-pagination__link luci-pagination__link--previous luci-pagination__link--disabled">
<svg class="luci-icon luci-link__icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#navigate-back"> </use>
</svg> Previous
<span class="luci-pagination__label-hidden" aria-hidden="true">Page</span>
</div>
</li>
<li class="luci-pagination__item">
<div class="luci-pagination__link luci-pagination__link--current">
<span class="luci-pagination__label-hidden" aria-hidden="true">(current)</span>
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 1 </div>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 2 </a>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link luci-pagination__link--next"> Next
<svg class="luci-icon luci-link__icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#navigate-forward"> </use>
</svg>
<span class="luci-pagination__label-hidden" aria-hidden="true">Page</span>
</a>
</li>
</ul>
<ul class="luci-pagination">
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link luci-pagination__link--previous">
<svg class="luci-icon luci-link__icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#navigate-back"> </use>
</svg> Previous
<span class="luci-pagination__label-hidden" aria-hidden="true">Page</span>
</a>
</li>
<li class="luci-pagination__item">
<a href="" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 1 </a>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 2 </a>
</li>
<li class="luci-pagination__item">
<div class="luci-pagination__link luci-pagination__link--current">
<span class="luci-pagination__label-hidden" aria-hidden="true">(current)</span>
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 3 </div>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 4 </a>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 5 </a>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link luci-pagination__link--next"> Next
<svg class="luci-icon luci-link__icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#navigate-forward"> </use>
</svg>
<span class="luci-pagination__label-hidden" aria-hidden="true">Page</span>
</a>
</li>
</ul>
If there are more than five pages in a sequence, always display the number of the first and last pages. Use ellipses to denote hidden page numbers.
<ul class="luci-pagination">
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link luci-pagination__link--previous">
<svg class="luci-icon luci-link__icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#navigate-back"> </use>
</svg> Previous
<span class="luci-pagination__label-hidden" aria-hidden="true">Page</span>
</a>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 1 </a>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 2 </a>
</li>
<li class="luci-pagination__item">
<div class="luci-pagination__link luci-pagination__link--current">
<span class="luci-pagination__label-hidden" aria-hidden="true">(current)</span>
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 3 </div>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 4 </a>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link luci-pagination__link--range">
<span class="luci-pagination__label-hidden" aria-hidden="true">pages 5-8</span> … </a>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link ">
<span class="luci-pagination__label-hidden" aria-hidden="true">page</span> 9 </a>
</li>
<li class="luci-pagination__item">
<a href="#" class="luci-pagination__link luci-pagination__link--next"> Next
<svg class="luci-icon luci-link__icon" aria-hidden="true">
<use xlink:href="/icons/luci.svg#navigate-forward"> </use>
</svg>
<span class="luci-pagination__label-hidden" aria-hidden="true">Page</span>
</a>
</li>
</ul>
Use aria-hidden
attributes on span
elements inside “Previous” and “Next” links:
<a href="#"> Previous <span aria-hidden="true">page</span></a>
<a href="#"> Next <span aria-hidden="true">page</span></a>
Use an aria-hidden
attribute on page label span
elements inside page links:
<a href="#"><span aria-hidden="true">page</span>1</a>
Add a tabindex="-1"
attribute and custom javascript on current page links to disable functionality or replace the a
tag with a div
tag:
<a tabindex="-1"><span aria-hidden="true">(current)</span><span aria-hidden="true">page</span>2</a>
<div><span aria-hidden="true">(current)</span><span aria-hidden="true">page</span>2</div>
Class | Applies to | Outcome |
---|---|---|
|
|
Centers pagination. |
|
|
Aligns pagination to the right. |
|
|
Removes link style and disables pointer events. |
|
|
Removes link style, disables pointer events and adds disabled style. |