Pagination

Examples

Default

Display navigation controls for paginated content.

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

<%= render UI::Pagination.new do %>
  <%= render UI::PaginationContent.new do %>
    <%= render UI::PaginationItem.new do %>
      <%= render UI::PaginationPrevious.new(href: "#") %>
    <% end %>
    <%= render UI::PaginationItem.new do %>
      <%= render UI::PaginationLink.new(href: "#") { "1" } %>
    <% end %>
    <%= render UI::PaginationItem.new do %>
      <%= render UI::PaginationLink.new(href: "#", active: true) { "2" } %>
    <% end %>
    <%= render UI::PaginationItem.new do %>
      <%= render UI::PaginationLink.new(href: "#") { "3" } %>
    <% end %>
    <%= render UI::PaginationItem.new do %>
      <%= render UI::PaginationNext.new(href: "#") %>
    <% end %>
  <% end %>
<% end %>

<%= render UI::PaginationComponent.new do %>
  <%= render UI::PaginationContentComponent.new do %>
    <%= render UI::PaginationItemComponent.new do %>
      <%= render UI::PaginationPreviousComponent.new(href: "#") %>
    <% end %>
    <%= render UI::PaginationItemComponent.new do %>
      <%= render(UI::PaginationLinkComponent.new(href: "#")) { "1" } %>
    <% end %>
    <%= render UI::PaginationItemComponent.new do %>
      <%= render(UI::PaginationLinkComponent.new(href: "#", active: true)) { "2" } %>
    <% end %>
    <%= render UI::PaginationItemComponent.new do %>
      <%= render(UI::PaginationLinkComponent.new(href: "#")) { "3" } %>
    <% end %>
    <%= render UI::PaginationItemComponent.new do %>
      <%= render UI::PaginationNextComponent.new(href: "#") %>
    <% end %>
  <% end %>
<% end %>

With Ellipsis

Pagination with ellipsis for many pages.

<%= render "ui/pagination" do %>
  <%= render "ui/pagination/content" do %>
    <%= render "ui/pagination/item" do %>
      <%= render "ui/pagination/previous", href: "#" %>
    <% end %>
    <%= render "ui/pagination/item" do %>
      <%= render "ui/pagination/link", href: "#" do %>1<% end %>
    <% end %>
    <%= render "ui/pagination/item" do %>
      <%= render "ui/pagination/ellipsis" %>
    <% end %>
    <%= render "ui/pagination/item" do %>
      <%= render "ui/pagination/link", href: "#", active: true do %>6<% end %>
    <% end %>
    <%= render "ui/pagination/item" do %>
      <%= render "ui/pagination/ellipsis" %>
    <% end %>
    <%= render "ui/pagination/item" do %>
      <%= render "ui/pagination/link", href: "#" do %>20<% end %>
    <% end %>
    <%= render "ui/pagination/item" do %>
      <%= render "ui/pagination/next", href: "#" %>
    <% end %>
  <% end %>
<% end %>

<%= render UI::Pagination.new do %>
  <%= render UI::PaginationContent.new do %>
    <%= render UI::PaginationItem.new do %>
      <%= render UI::PaginationPrevious.new(href: "#") %>
    <% end %>
    <%= render UI::PaginationItem.new do %>
      <%= render UI::PaginationLink.new(href: "#") { "1" } %>
    <% end %>
    <%= render UI::PaginationItem.new do %>
      <%= render UI::PaginationEllipsis.new %>
    <% end %>
    <%= render UI::PaginationItem.new do %>
      <%= render UI::PaginationLink.new(href: "#", active: true) { "6" } %>
    <% end %>
    <%= render UI::PaginationItem.new do %>
      <%= render UI::PaginationEllipsis.new %>
    <% end %>
    <%= render UI::PaginationItem.new do %>
      <%= render UI::PaginationLink.new(href: "#") { "20" } %>
    <% end %>
    <%= render UI::PaginationItem.new do %>
      <%= render UI::PaginationNext.new(href: "#") %>
    <% end %>
  <% end %>
<% end %>

<%= render UI::PaginationComponent.new do %>
  <%= render UI::PaginationContentComponent.new do %>
    <%= render UI::PaginationItemComponent.new do %>
      <%= render UI::PaginationPreviousComponent.new(href: "#") %>
    <% end %>
    <%= render UI::PaginationItemComponent.new do %>
      <%= render(UI::PaginationLinkComponent.new(href: "#")) { "1" } %>
    <% end %>
    <%= render UI::PaginationItemComponent.new do %>
      <%= render UI::PaginationEllipsisComponent.new %>
    <% end %>
    <%= render UI::PaginationItemComponent.new do %>
      <%= render(UI::PaginationLinkComponent.new(href: "#", active: true)) { "6" } %>
    <% end %>
    <%= render UI::PaginationItemComponent.new do %>
      <%= render UI::PaginationEllipsisComponent.new %>
    <% end %>
    <%= render UI::PaginationItemComponent.new do %>
      <%= render(UI::PaginationLinkComponent.new(href: "#")) { "20" } %>
    <% end %>
    <%= render UI::PaginationItemComponent.new do %>
      <%= render UI::PaginationNextComponent.new(href: "#") %>
    <% end %>
  <% end %>
<% end %>

Features

Custom styling with Tailwind classes
ARIA attributes for accessibility

API Reference

Content

Ellipsis

Item

Link

Parameters

Name	Type	Default	Description
href	String	#	The href
active	Boolean	false	The active
size	String	icon	Size of the element