Pagination

The guideline content on this page is synced with Figma and can be used as a source of truth. Open in Figma

Use pagination to navigate a large, ordered collection of items or pages. The users click buttons to move between pages.

Anatomy

Go to first page
Previous page
Current item
Total items
Next page
Go to last page

Placement

Pagination is a key component of a design system, especially when dealing with tables that contain a large amount of data.

The pagination control is placed in the bottom of the data table.

Example
HTML

#	First name	Last name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
100 of 729 items

development/documentation/docs/pagination/examples/placement.html

<div class="table-responsive">
    <table class="table no-margin">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First name</th>
                <th scope="col">Last name</th>
                <th scope="col">Username</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">
                    <nav class="d-flex justify-content-end" aria-label="Page navigation for the data table">
                        <ul class="pagination">
                            <li>
                                <button type="button" class="first btn" aria-label="Go to first page"><span class="spirisicon spirisicon-sm spirisicon-chevron-first" aria-hidden="true"></span></button>
                            </li>
                            <li>
                                <button type="button" class="prev btn" aria-label="Previous page"><span class="spirisicon spirisicon-sm spirisicon-chevron-left" aria-hidden="true"></span></button>
                            </li>
                            <li class="pagination-status">
                                <b>100</b>
                                <span>of</span>
                                <b>729</b>
                                <span>items</span>
                            </li>
                            <li>
                                <button type="button" class="next btn" aria-label="Next page"><span class="spirisicon spirisicon-sm spirisicon-chevron-right" aria-hidden="true"></span></button>
                            </li>
                            <li>
                                <button type="button" class="last btn" aria-label="Go to last page"><span class="spirisicon spirisicon-sm spirisicon-chevron-last" aria-hidden="true"></span></button>
                            </li>
                        </ul>
                    </nav>
                </td>
            </tr>
        </tfoot>
    </table>
</div>

Accessibility

Keyboard interaction

All components should be reachable via Tab and Shift + Tab keys. Disabled navigation buttons are skipped in the tab order — either through the native disabled attribute, or, when the button must stay in the DOM, with tabindex="-1" and aria-disabled="true" — so keyboard users never land on them.

Example
HTML

development/documentation/docs/pagination/examples/keyboard-interaction.html

<nav class="d-flex justify-content-end" aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <button class="first btn" aria-label="Go to first page"><span class="spirisicon spirisicon-sm spirisicon-chevron-first" aria-hidden="true"></span></button>
        </li>
        <li>
            <button class="prev btn focus" aria-label="Previous page"><span class="spirisicon spirisicon-sm spirisicon-chevron-left" aria-hidden="true"></span></button>
        </li>
        <li class="pagination-status">
            <b>100</b>
            <span>of</span>
            <b>729</b>
            <span>items</span>
        </li>
        <li>
            <button class="next btn" aria-label="Next page"><span class="spirisicon spirisicon-sm spirisicon-chevron-right" aria-hidden="true"></span></button>
        </li>
        <li>
            <button class="last btn" aria-label="Go to last page"><span class="spirisicon spirisicon-sm spirisicon-chevron-last" aria-hidden="true"></span></button>
        </li>
    </ul>
</nav>

Best practices

Single page

Use pagination to break up long collections. When everything fits on a single page there is nothing to navigate, so the control adds clutter without adding value.

Example
HTML

development/documentation/docs/pagination/examples/single-page-do.html

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <button class="first btn" aria-label="Go to first page"><span class="spirisicon spirisicon-sm spirisicon-chevron-first" aria-hidden="true"></span></button>
        </li>
        <li>
            <button class="prev btn" aria-label="Previous page"><span class="spirisicon spirisicon-sm spirisicon-chevron-left" aria-hidden="true"></span></button>
        </li>
        <li class="pagination-status">
            <b>100</b>
            <span>of</span>
            <b>729</b>
            <span>items</span>
        </li>
        <li>
            <button class="next btn" aria-label="Next page"><span class="spirisicon spirisicon-sm spirisicon-chevron-right" aria-hidden="true"></span></button>
        </li>
        <li>
            <button class="last btn" aria-label="Go to last page"><span class="spirisicon spirisicon-sm spirisicon-chevron-last" aria-hidden="true"></span></button>
        </li>
    </ul>
</nav>

Use pagination when there are more than 20 items.

Example
HTML

development/documentation/docs/pagination/examples/single-page-dont.html

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <button class="first btn" aria-label="Go to first page"><span class="spirisicon spirisicon-sm spirisicon-chevron-first" aria-hidden="true"></span></button>
        </li>
        <li>
            <button class="prev btn" aria-label="Previous page"><span class="spirisicon spirisicon-sm spirisicon-chevron-left" aria-hidden="true"></span></button>
        </li>
        <li class="pagination-status">
            <b>1</b>
            <span>of</span>
            <b>1</b>
            <span>items</span>
        </li>
        <li>
            <button class="next btn" aria-label="Next page"><span class="spirisicon spirisicon-sm spirisicon-chevron-right" aria-hidden="true"></span></button>
        </li>
        <li>
            <button class="last btn" aria-label="Go to last page"><span class="spirisicon spirisicon-sm spirisicon-chevron-last" aria-hidden="true"></span></button>
        </li>
    </ul>
</nav>

Don't

Don't use pagination for a small number of items.

Specs

Pagination specifications: 8 px between adjacent navigation buttons, 16 px between the button group and the page-count text, and 24 px outer padding

Developer reference

The following sections describe supported functionality that is not part of the Figma design specification.

In a table

Placing the pagination in a table footer is probably the primary use case of the component. Put the .pagination inside a <tfoot> cell that spans the full width of the table — the footer cell supplies the divider line and the surrounding spacing, so the control stays transparent and inherits the table's surface.

Example
HTML

#	Product	Category	Stock
1	Wireless mouse	Accessories	128
2	Mechanical keyboard	Accessories	54
3	27" monitor	Displays	17
100 of 729 items

development/documentation/docs/pagination/examples/in-table.html

<div class="table-responsive">
    <table class="table no-margin">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Product</th>
                <th scope="col">Category</th>
                <th scope="col">Stock</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Wireless mouse</td>
                <td>Accessories</td>
                <td>128</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Mechanical keyboard</td>
                <td>Accessories</td>
                <td>54</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>27" monitor</td>
                <td>Displays</td>
                <td>17</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">
                    <nav class="d-flex justify-content-end" aria-label="Table page navigation">
                        <ul class="pagination">
                            <li>
                                <button type="button" class="first btn" aria-label="Go to first page"><span class="spirisicon spirisicon-sm spirisicon-chevron-first" aria-hidden="true"></span></button>
                            </li>
                            <li>
                                <button type="button" class="prev btn" aria-label="Previous page"><span class="spirisicon spirisicon-sm spirisicon-chevron-left" aria-hidden="true"></span></button>
                            </li>
                            <li class="pagination-status">
                                <b>100</b>
                                <span>of</span>
                                <b>729</b>
                                <span>items</span>
                            </li>
                            <li>
                                <button type="button" class="next btn" aria-label="Next page"><span class="spirisicon spirisicon-sm spirisicon-chevron-right" aria-hidden="true"></span></button>
                            </li>
                            <li>
                                <button type="button" class="last btn" aria-label="Go to last page"><span class="spirisicon spirisicon-sm spirisicon-chevron-last" aria-hidden="true"></span></button>
                            </li>
                        </ul>
                    </nav>
                </td>
            </tr>
        </tfoot>
    </table>
</div>

Basic

Each navigation button is an icon-only secondary button: no visible text, an accessible name supplied via aria-label, and a spirisicon chevron glyph marked aria-hidden="true". Use .first, .prev, .next and .last with the matching spirisicon-chevron-* glyph.

Example
HTML

development/documentation/docs/pagination/examples/basic.html

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <button class="first btn" disabled aria-label="Go to first page"><span class="spirisicon spirisicon-sm spirisicon-chevron-first" aria-hidden="true"></span></button>
        </li>
        <li>
            <button class="prev btn disabled" tabindex="-1" aria-disabled="true" aria-label="Previous page"><span class="spirisicon spirisicon-sm spirisicon-chevron-left" aria-hidden="true"></span></button>
        </li>
        <li class="pagination-status">
            <b>1</b>
            <span>of</span>
            <b>8</b>
        </li>
        <li>
            <button class="next btn" aria-label="Next page"><span class="spirisicon spirisicon-sm spirisicon-chevron-right" aria-hidden="true"></span></button>
        </li>
        <li>
            <button class="last btn" aria-label="Go to last page"><span class="spirisicon spirisicon-sm spirisicon-chevron-last" aria-hidden="true"></span></button>
        </li>
    </ul>
</nav>

Items per page and jump to page

Add an optional items-per-page <select class="quantity"> and a jump-to-page number input for large data sets. Use the .mr-8 / .ml-8 utilities to space the form controls from the navigation buttons.

Example
HTML

development/documentation/docs/pagination/examples/advanced.html

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <label for="quantityPerPageAlt">Show per page:</label>
        </li>
        <li>
            <select class="quantity mr-8" name="perPage" id="quantityPerPageAlt">
                <option value="24">24</option>
                <option value="52">52</option>
                <option value="75">75</option>
                <option selected value="100">100</option>
            </select>
        </li>
        <li>
            <button type="button" class="first btn" aria-label="Go to first page"><span class="spirisicon spirisicon-sm spirisicon-chevron-first" aria-hidden="true"></span></button>
        </li>
        <li>
            <button type="button" class="prev btn" aria-label="Previous page"><span class="spirisicon spirisicon-sm spirisicon-chevron-left" aria-hidden="true"></span></button>
        </li>
        <li class="pagination-status">
            <b>100</b>
            <span>of</span>
            <b>729</b>
            <span>items</span>
        </li>
        <li>
            <button type="button" class="next btn" aria-label="Next page"><span class="spirisicon spirisicon-sm spirisicon-chevron-right" aria-hidden="true"></span></button>
        </li>
        <li>
            <button type="button" class="last btn" aria-label="Go to last page"><span class="spirisicon spirisicon-sm spirisicon-chevron-last" aria-hidden="true"></span></button>
        </li>
        <li>
            <label class="ml-8" for="jumpToPage">Jump to page:</label>
        </li>
        <li>
            <input type="number" name="pageJump" id="jumpToPage" placeholder="0" size="1" min="1" max="8">
        </li>
    </ul>
</nav>

Editable page number

For a large number of pages, render the current page as an editable <input type="number"> in place of the static current-page number, so users can type a page and jump straight to it. Keep the total page count beside it as static text. Give the input an aria-label and matching min / max bounds.

Example
HTML

development/documentation/docs/pagination/examples/page-input.html

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <button class="first btn" disabled aria-label="Go to first page"><span class="spirisicon spirisicon-sm spirisicon-chevron-first" aria-hidden="true"></span></button>
        </li>
        <li>
            <button class="prev btn disabled" tabindex="-1" aria-disabled="true" aria-label="Previous page"><span class="spirisicon spirisicon-sm spirisicon-chevron-left" aria-hidden="true"></span></button>
        </li>
        <li class="pagination-status">
            <input type="number" value="1" min="1" max="10" size="2" aria-label="Current page">
            <span>of</span>
            <b>10</b>
        </li>
        <li>
            <button class="next btn" aria-label="Next page"><span class="spirisicon spirisicon-sm spirisicon-chevron-right" aria-hidden="true"></span></button>
        </li>
        <li>
            <button class="last btn" aria-label="Go to last page"><span class="spirisicon spirisicon-sm spirisicon-chevron-last" aria-hidden="true"></span></button>
        </li>
    </ul>
</nav>