Pagination - Components - Design System - Oxford Brookes University

Preview
Code

<nav class="pagination is-centered" role="navigation" aria-label="pagination">
    <ul class="pagination-list">
        <li><strong>Page:</strong> </li>
        <li><a class="pagination-link" aria-label="Page 1">1</a></li>
        <li><span class="pagination-ellipsis">&hellip;</span></li>
        <li><a class="pagination-link" aria-label="Page 45">45</a></li>
        <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
        <li><a class="pagination-link" aria-label="Page 47">47</a></li>
        <li><span class="pagination-ellipsis">&hellip;</span></li>
        <li><a class="pagination-link" aria-label="Page 86">86</a></li>
    </ul>
</nav>
<br>
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
    <ul class="pagination-list">
        <li><strong>Filter results:</strong> </li>
        <li><a class="pagination-link" aria-label="All">All</a></li>
        <li><a class="pagination-link" aria-label="People">People</a></li>
        <li><a class="pagination-link is-current" aria-label="Centres, Institutes and Groups" aria-current="page">Centres, Institutes and Groups</a></li>
        <li><a class="pagination-link" aria-label="Publications">Publications</a></li>
        <li><a class="pagination-link" aria-label="News">News</a></li>
        <li><a class="pagination-link" aria-label="Events">Events</a></li>
        <li><a class="pagination-link" aria-label="Courses">Courses</a></li>
    </ul>
</nav>

Usage

The pagination component consists of several elements:

pagination-previous and pagination-next for incremental navigation
pagination-list which displays page items:
- pagination-link for the page numbers
- pagination-ellipsis for range separators
Use the .is-centered class to centre the list

All elements are optional so you can compose your pagination as you wish.

Read the official Bulma documentation for pagination.

Accessibility

Use aria-label attributes on next and previous links.