Skip to main content
Maquina
Docs components

Pagination

Navigation for paginated content.

Usage

<%= render "components/pagination" do %>
  <%= render "components/pagination/content" do %>
    <%= render "components/pagination/item" do %>
      <%= render "components/pagination/previous", href: "/page/1" %>
    <% end %>
    <%= render "components/pagination/item" do %>
      <%= render "components/pagination/link", href: "/page/1" do %>1<% end %>
    <% end %>
    <%= render "components/pagination/item" do %>
      <%= render "components/pagination/link", href: "/page/2", active: true do %>2<% end %>
    <% end %>
    <%= render "components/pagination/item" do %>
      <%= render "components/pagination/link", href: "/page/3" do %>3<% end %>
    <% end %>
    <%= render "components/pagination/item" do %>
      <%= render "components/pagination/ellipsis" %>
    <% end %>
    <%= render "components/pagination/item" do %>
      <%= render "components/pagination/next", href: "/page/3" %>
    <% end %>
  <% end %>
<% end %>

Pagy Integration

For Pagy-backed collections, the pagination_nav helper renders the full pagination from a Pagy object, with Turbo-aware links:

<%= pagination_nav(@pagy, :users_path) %>

<%# Preserve query params and target a Turbo Frame %>
<%= pagination_nav(@pagy, :search_users_path,
      params: { q: params[:q] },
      turbo: { action: :replace, frame: "users" }) %>

pagination_simple renders the same navigation without page-number labels. Both return nothing when there is a single page.

Parameter Type Default Description
pagy Pagy required The Pagy pagination object
route_helper Symbol required Route helper used to build page links
params Hash {} Extra query params preserved across pages
turbo Hash { action: :replace } Turbo data attributes for the links, e.g. frame:
show_labels Boolean true Show Previous/Next text labels (pagination_nav only)
css_classes String "" Additional CSS classes
html_options Hash {} Additional HTML attributes

API Reference

Pagination

Parameter Type Default Description
css_classes String "" Additional CSS classes
html_options Hash {} Additional HTML attributes

Pagination Content

Parameter Type Default Description
css_classes String "" Additional CSS classes
html_options Hash {} Additional HTML attributes

Pagination Item

Parameter Type Default Description
css_classes String "" Additional CSS classes
html_options Hash {} Additional HTML attributes

Pagination Link

Parameter Type Default Description
href String required URL for the page
active Boolean false Whether current page
disabled Boolean false Whether disabled
css_classes String "" Additional CSS classes
html_options Hash {} Additional HTML attributes

Pagination Previous

Parameter Type Default Description
href String nil URL for previous page
label String "Previous" Button label
disabled Boolean false Whether disabled
show_label Boolean true Show text label
css_classes String "" Additional CSS classes
html_options Hash {} Additional HTML attributes

Pagination Next

Parameter Type Default Description
href String nil URL for next page
label String "Next" Button label
disabled Boolean false Whether disabled
show_label Boolean true Show text label
css_classes String "" Additional CSS classes
html_options Hash {} Additional HTML attributes

Pagination Ellipsis

Parameter Type Default Description
css_classes String "" Additional CSS classes
html_options Hash {} Additional HTML attributes