Skip to main content

Pagination

Navigation controls for paginated content with accessible markup.

Basic pagination

<nav class="l-ui-pagination" aria-label="Pagination">
  <span class="l-ui-pagination__item l-ui-pagination__item--disabled"
     aria-disabled="true" aria-label="Previous">&lt;</span>
  <span class="l-ui-pagination__item l-ui-pagination__item--active"
     aria-current="page">1</span>
  <a href="#" class="l-ui-pagination__item">2</a>
  <span class="l-ui-pagination__gap">&hellip;</span>
  <a href="#" class="l-ui-pagination__item">10</a>
  <a href="#" class="l-ui-pagination__item" aria-label="Next">&gt;</a>
</nav>

With the pagy gem (optional)

Use the l_ui_pagy helper to render styled pagination. Requires the pagy gem in your Gemfile:

# Controller
@pagy, @records = pagy(Model.all, limit: 10)

# View
<%= l_ui_pagy(@pagy) %>

CSS classes

Pagination CSS classes
Class Description
l-ui-pagination Pagination container
l-ui-pagination__item Pagination link/button
l-ui-pagination__item--active Current page indicator
l-ui-pagination__item--disabled Disabled state (prev/next at boundaries)
l-ui-pagination__gap Ellipsis for skipped pages
l-ui-pagy-container Container for Pagy-generated markup