NetApp logo
LUCI Version 4.0.0

Pagination

The pagination component enables a 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.

Examples

The pagination component can be placed at the bottom of the content, left-aligned, centered or right-aligned.

Bottom Left-Aligned

Copied to clipboard 
<ul class="luci-pagination">
    <li class="luci-pagination__item">
        <a href=&quot;#&quot; class="luci-pagination__link luci-pagination__link--previous">
            <svg class="luci-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=&quot;#&quot; class="luci-pagination__link luci-pagination__link--next"> Next <svg class="luci-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>

Centered

Copied to clipboard 
<ul class="luci-pagination luci-pagination--centered">
    <li class="luci-pagination__item">
        <a href=&quot;#&quot; class="luci-pagination__link luci-pagination__link--previous">
            <svg class="luci-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=&quot;#&quot; class="luci-pagination__link luci-pagination__link--next"> Next <svg class="luci-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>

Bottom Right-Aligned

Copied to clipboard 
<ul class="luci-pagination luci-pagination--right-aligned">
    <li class="luci-pagination__item">
        <a href=&quot;#&quot; class="luci-pagination__link luci-pagination__link--previous">
            <svg class="luci-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=&quot;#&quot; class="luci-pagination__link luci-pagination__link--next"> Next <svg class="luci-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>

Two Pages

Copied to clipboard 
<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" 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=&quot;#&quot; class="luci-pagination__link luci-pagination__link--next"> Next <svg class="luci-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>

Five Pages

Copied to clipboard 
<ul class="luci-pagination">
    <li class="luci-pagination__item">
        <a href=&quot;#&quot; class="luci-pagination__link luci-pagination__link--previous">
            <svg class="luci-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=&quot;#&quot; class="luci-pagination__link luci-pagination__link--next"> Next <svg class="luci-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>

More Than Five Pages

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.

Copied to clipboard 
<ul class="luci-pagination">
    <li class="luci-pagination__item">
        <a href=&quot;#&quot; class="luci-pagination__link luci-pagination__link--previous">
            <svg class="luci-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> &hellip;
        </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=&quot;#&quot; class="luci-pagination__link luci-pagination__link--next"> Next <svg class="luci-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>

Do’s and Don’ts

Do

  • Use when a list or table has so many items that it improves the user experience by breaking the content into smaller sections
  • Use when there are more than 20 results on a search results page

Don’t

  • Use when the page uses a lazy load or continuous scroll of content items
  • Use when there is only one page of content

Accessibility

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 Reference

Class Applies to Outcome

.luci-pagination--centered

.luci-pagination

Centers pagination.

.luci-pagination--right-aligned

.luci-pagination

Aligns pagination to the right.

.luci-pagination__link--current

.luci-pagination__link

Removes link style and disables pointer events.

.luci-pagination__link--disabled

.luci-pagination__link

Removes link style, disables pointer events and adds disabled style.