Commentary

The pagination component is a classic component that helps with navigating through large amounts of items retrieved from a database. Pagination is a flexbox styled element that allows for better control over the children.

For mobile widths (ie less than nominally 576px), the pagination elements reposition themselves. The previous and next targets move together at the top inside the parent. The page targets move to the bottom inside the parent. The font-sizes also reduce by one size. This allows the pagination component to continue to provide access to allow of the clickable targets.

Usage

Classes:
.pagination Defines pagination container.
.pagination-rounded Displays a rounded page target.
.prev, .next Optional list items for previous and next targets.
.pagination span Displays an optional span element as an ellipsis.
.is-current Highlights active element.
Positioning options: .is-centered, .is-right
Size options: .is-small, .is-medium, .is-large
Dependencies:
File: pagination.css
Variables: --border-main-darker, --grey-lighter, --link, -link-dark, --mar-horz, --radius, --size-5, --size-6, --size-7, --text, --text-light, --text-darker, --text-invert

Examples

Normal and centered


                 <nav class="pagination is-centered" aria-label="pagination">
                    <ul>
                        <li class="prev"><a href="#extend-comp_pagination"><</a></li>
                        <li><a href="#extend-comp_pagination" aria-label="Goto page 1">1</a></li>
                        <li><span>…</span></li>
                        <li><a href="#extend-comp_pagination" aria-label="Goto page 45">45</a></li>
                        <li><a class="is-current" href="#extend-comp_pagination" aria-label="Page 45" aria-current="page">45</a></li>
                        <li><a href="#extend-comp_pagination" aria-label="Goto page 47">47</a></li>
                        <li><span>…</span></li>
                        <li><a href="#extend-comp_pagination" aria-label="Goto page 185">185</a></li>
                        <li class="next"><a href="#extend-comp_pagination" >></a></li>
                    </ul>
                </nav>

Normal and rounded


                <nav class="pagination is-rounded" aria-label="pagination">
                    <ul>
                        <li class="prev"><a href="#extend-comp_pagination"><</a></li>
                        <li><a href="#extend-comp_pagination" aria-label="Goto page 1">1</a></li>
                        <li><span>…</span></li>
                        <li><a href="#extend-comp_pagination" aria-label="Goto page 45">45</a></li>
                        <li><a class="is-current" href="#extend-comp_pagination" aria-label="Page 45" aria-current="page">45</a></li>
                        <li><a href="#extend-comp_pagination" aria-label="Goto page 47">47</a></li>
                        <li><span>…</span></li>
                        <li><a href="#extend-comp_pagination" aria-label="Goto page 185">185</a></li>
                        <li class="next"><a href="#extend-comp_pagination" >></a></li>
                    </ul>
                </nav>

Small and is right


                <nav class="pagination is-right is-small" aria-label="pagination">
                    <ul>
                        <li class="prev"><a href="#extend-comp_pagination"><</a></li>
                        <li><a href="#extend-comp_pagination" aria-label="Goto page 1">1</a></li>
                        <li><span>…</span></li>
                        <li><a href="#extend-comp_pagination" aria-label="Goto page 45">45</a></li>
                        <li><a class="is-current" href="#extend-comp_pagination" aria-label="Page 45" aria-current="page">45</a></li>
                        <li><a href="#extend-comp_pagination" aria-label="Goto page 47">47</a></li>
                        <li><span>…</span></li>
                        <li><a href="#extend-comp_pagination" aria-label="Goto page 185">185</a></li>
                        <li class="next"><a href="#extend-comp_pagination" >></a></li>
                    </ul>
                </nav>

Medium and is centered


                <nav class="pagination is-centered is-medium" aria-label="pagination">
                    <ul>
                        <li class="prev"><a href="#extend-comp_pagination"><</a></li>
                        <li><a href="#extend-comp_pagination" aria-label="Goto page 1">1</a></li>
                        <li><span>…</span></li>
                        <li><a href="#extend-comp_pagination" aria-label="Goto page 45">45</a></li>
                        <li><a class="is-current" href="#extend-comp_pagination" aria-label="Page 45" aria-current="page">45</a></li>
                        <li><a href="#extend-comp_pagination" aria-label="Goto page 47">47</a></li>
                        <li><span>…</span></li>
                        <li><a href="#extend-comp_pagination" aria-label="Goto page 185">185</a></li>
                        <li class="next"><a href="#extend-comp_pagination" >></a></li>
                    </ul>
                </nav>

Large centered and rounded


                <nav class="pagination is-large is-centered is-rounded" aria-label="pagination">
                    <ul>
                        <li class="prev"><a href="#extend-comp_pagination"><</a></li>
                        <li><a href="#extend-comp_pagination" aria-label="Goto page 1">1</a></li>
                        <li><span>…</span></li>
                        <li><a href="#extend-comp_pagination" aria-label="Goto page 45">45</a></li>
                        <li><a class="is-current" href="#extend-comp_pagination" aria-label="Page 45" aria-current="page">45</a></li>
                        <li><a href="#extend-comp_pagination" aria-label="Goto page 47">47</a></li>
                        <li><span>…</span></li>
                        <li><a href="#extend-comp_pagination" aria-label="Goto page 185">185</a></li>
                        <li class="next"><a href="#extend-comp_pagination" >></a></li>
                    </ul>
                </nav>