Skip to content
Moodle Design Systemby Didactika
Moodle 5.3 LTS
v0.1
EN
Bootstrap components
Didactika theme v0.1

Pagination

Moves through a long list split in pages, with the current page always visible.

Pagination lets the user move through the pages of a list or a table. It shows the current page and its neighbours, and the way to the previous and next ones.

When to use it

Use it

  • Under every list and table that can have more rows than fit: rows per page on the left, the range and the arrows on the right.
  • Say how much there is (“21–40 of 312”) and where you are (“Page 2 of 16”).
  • Offer the first and the last page when the list has more than a few pages.
  • Keep the page and the rows per page in the address, so a link or a reload comes back to the same place.

Don't

  • Paginate fewer than two pages.
  • Show every page number of a long list.
  • Use it to move between the steps of a process; use steps.
  • Put it above and below the same table: under it is enough.

Anatomy

The pagination of a list is the one we use in every plugin (it is the one of Filebank): a row with, on the left, the label Rows per page and a small select, and on the right the range (“21–40 of 312”), the page (“Page 2 of 16”) and a group of four small icon buttons: first, previous, next and last. The group is outlined and joined, with the ends rounded; a button that cannot be used is disabled, never hidden, so the group does not change width.

Numbered pages (pagination, page-item, page-link) are for the places where the user needs to jump to a given page of a short list, and for Moodle’s own pages that already use them.

Variants and states

The pagination of a list

Pagination of a list
21–40 of 312 · Page 2 of 16
1–20 of 312
Page 3 of 16

The first row is the full version, for lists of many rows. The second is the short version, for a list that only goes forward (a feed, a log that loads more). The third is the version with text, for a flow where only the next page matters.

Numbered pages

Numbered pages

Moodle 5.3’s own pagination

Moodle 5.3 has its own pagination component (mds-pagination) for the places where Moodle itself paginates.

Pagination of Moodle 5.3

Behaviour

  1. Changing the rows per page goes back to the first page, because the old page number may no longer exist.
  2. The buttons are links when the page is in the address (so they can be opened in a new tab) and buttons when the list updates in place.
  3. While the next page loads, the list shows its placeholder and the pager is hidden; it comes back with the new range.
  4. After going to another page the focus goes to the top of the list, and the new range is announced (“Showing 41–60 of 312”).
  5. A page that no longer exists (the list got shorter) shows the last one, never an empty page.

Combinations

Combination Use it for
Numbered pages × few pages Up to about nine pages: show them all, with previous and next.
Pager of a list × many rows Rows per page, the range (“21–40 of 312”) and the four arrows. Under a table, inside the card that holds it.
Previous / Next × stepper Two buttons and “Page 3 of 16” for a flow where only the next page matters.
Size Small under a dense table, default elsewhere.

What Didactika changes and why

What we changed Why it helps
The pager says “21–40 of 312” instead of only numbering pages People want to know how much there is, not which page number they are on.
Rows per page is a select next to the count The user can show more rows without leaving the list, and the choice sits where the count is.
The arrows are a group of icon buttons They line up with the rest of the buttons and are easy to hit.
The current page is filled, the others are plain There is one clear “you are here”.

Classes

Class What it does
pagination The list
pagination-sm, pagination-lg Smaller and larger
page-item, page-link An item and its link
active, disabled State of an item
dd-pager, dd-pager-size, dd-pager-end, dd-pager-range The pagination of a list: rows per page, range and arrows (Didactika)

In this version

Bootstrap 5.3 keeps its colours in CSS variables (--bs-*), so a theme recolours the component with one variable.

Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet.

Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet.

Accessibility

  • The wrapper is a nav with an aria-label.
  • The current page has aria-current="page".
  • A disabled link has aria-disabled="true" and tabindex="-1".
  • Previous and next have words or an aria-label, never only an arrow.