Rails UI

Utility page navigation which includes next and previous links.

<nav aria-label="Page navgiation" class="text-slate-500 sm:text-sm text-base font-medium dark:text-slate-300"> <ul class="flex flex-wrap items-center sm:justify-between justify-center"> <li class="flex-1 flex justify-start items-center sm:w-auto w-full"> <a href="#" class="flex justify-center items-center space-x-2 py-2 px-4 rounded hover:bg-slate-50/50 group hover:text-primary-600 sm:w-auto w-full sm:bg-transparent bg-slate-50 sm:mb-0 mb-3 dark:hover:bg-slate-500/30 dark:hover:text-slate-200"> <%= icon "arrow-small-left", class: "w-4 h-4 text-slate-400 group-hover:text-primary-500 dark:group-hover:text-slate-200" %> <span>Previous</span> </a> </li> <div class="flex items-center justify-center sm:w-auto w-full sm:text-sm text-lg"> <li> <a href="#" class="py-2 px-4 block border-t-2 border-transparent rounded hover:bg-slate-50/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200">1</a> </li> <li> <a href="#" class="py-2 px-4 border-t-2 block border-primary-500 hover:bg-primary-50/50 text-primary-600 dark:text-primary-400 dark:border-primary-400 dark:hover:bg-primary-500/30">2</a> </li> <li> <a href="#" class="py-2 px-4 block border-t-2 border-transparent rounded hover:bg-slate-50/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200">3</a> </li> <li> <span href="#" class="py-2 px-4 block border-t-2 border-transparent rounded pointer-events-none select-none">…</span> </li> <li> <a href="#" class="py-2 px-4 block border-t-2 border-transparent rounded hover:bg-slate-50/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200">8</a> </li> <li> <a href="#" class="py-2 px-4 block border-t-2 border-transparent rounded hover:bg-slate-50/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200">9</a> </li> <li> <a href="#" class="py-2 px-4 block border-t-2 border-transparent rounded hover:bg-slate-50/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200">10</a> </li> </div> <li class="flex-1 flex justify-end items-center"> <a href="#" class="flex justify-center items-center space-x-2 py-2 px-4 rounded hover:bg-slate-50/50 group hover:text-primary-600 sm:w-auto w-full sm:bg-transparent bg-slate-50 sm:mt-0 mt-3 dark:hover:bg-slate-500/30 dark:hover:text-slate-200"> <span>Next</span> <%= icon "arrow-small-right", class: "w-4 h-4 text-slate-400 group-hover:text-primary-500 dark:group-hover:text-slate-200" %> </a> </li> </ul> </nav>

<nav aria-label="Page navgiation" class="text-slate-500 sm:text-sm text-base font-medium dark:text-slate-300"> <ul class="flex flex-wrap items-center sm:justify-between justify-center"> <li class="flex-1 flex justify-start items-center sm:w-auto w-full"> <%= link_to "#", class: "flex justify-center items-center space-x-2 py-2 px-4 rounded hover:bg-slate-50/50 group hover:text-primary-600 sm:w-auto w-full sm:bg-transparent bg-slate-50 sm:mb-0 mb-3 dark:hover:bg-slate-500/30 dark:hover:text-slate-200" %> <%= icon "arrow-small-left", class: "w-4 h-4 text-slate-400 group-hover:text-primary-500 dark:group-hover:text-slate-200" %> <span>Previous</span> <% end %> </li> <div class="flex items-center justify-center sm:w-auto w-full sm:text-sm text-lg"> <li> <%= link_to "1", "#", class:"py-2 px-4 block border-t-2 border-transparent rounded hover:bg-slate-50/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200" %> </li> <li> <%= link_to "2", "#", class:"py-2 px-4 border-t-2 block border-primary-500 hover:bg-primary-50/50 text-primary-600 dark:text-primary-400 dark:border-primary-400 dark:hover:bg-primary-500/30" %> </li> <li> <%= link_to "3", "#", class:"py-2 px-4 block border-t-2 border-transparent rounded hover:bg-slate-50/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200" %> </li> <li> <span href="#" class="py-2 px-4 block border-t-2 border-transparent rounded pointer-events-none select-none">…</span> </li> <li> <%= link_to "8", "#", class:"py-2 px-4 block border-t-2 border-transparent rounded hover:bg-slate-50/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200" %> </li> <li> <%= link_to "9", "#", class:"py-2 px-4 block border-t-2 border-transparent rounded hover:bg-slate-50/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200" %> </li> <li> <%= link_to "10", "#", class:"py-2 px-4 block border-t-2 border-transparent rounded hover:bg-slate-50/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200" %> </li> </div> <li class="flex-1 flex justify-end items-center"> <%= link_to "#", class: "flex justify-center items-center space-x-2 py-2 px-4 rounded hover:bg-slate-50/50 group hover:text-primary-600 sm:w-auto w-full sm:bg-transparent bg-slate-50 sm:mt-0 mt-3 dark:hover:bg-slate-500/30 dark:hover:text-slate-200" do %> <span>Next</span> <%= icon "arrow-small-right", class: "w-4 h-4 text-slate-400 group-hover:text-primary-500 dark:group-hover:text-slate-200" %> <% end %> </li> </ul> </nav>

%nav.text-slate-500.sm:text-sm.text-base.font-medium.dark:text-slate-300{"aria-label" => "Page navgiation"} %ul.flex.flex-wrap.items-center.sm:justify-between.justify-center %li.flex-1.flex.justify-start.items-center.sm:w-auto.w-full = link_to "#", class: "flex justify-center items-center space-x-2 py-2 px-4 rounded hover:bg-slate-50/50 group hover:text-primary-600 sm:w-auto w-full sm:bg-transparent bg-slate-50 sm:mb-0 mb-3 dark:hover:bg-slate-500/30 dark:hover:text-slate-200" = icon "arrow-small-left", class: "w-4 h-4 text-slate-400 group-hover:text-primary-500 dark:group-hover:text-slate-200" %span Previous .flex.items-center.justify-center.sm:w-auto.w-full.sm:text-sm.text-lg %li = link_to "1", "#", class:"py-2 px-4 block border-t-2 border-transparent rounded hover:bg-slate-50/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200" %li = link_to "2", "#", class:"py-2 px-4 border-t-2 block border-primary-500 hover:bg-primary-50/50 text-primary-600 dark:text-primary-400 dark:border-primary-400 dark:hover:bg-primary-500/30" %li = link_to "3", "#", class:"py-2 px-4 block border-t-2 border-transparent rounded hover:bg-slate-50/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200" %li %span.py-2.px-4.block.border-t-2.border-transparent.rounded.pointer-events-none.select-none{href: "#"} … %li = link_to "8", "#", class:"py-2 px-4 block border-t-2 border-transparent rounded hover:bg-slate-50/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200" %li = link_to "9", "#", class:"py-2 px-4 block border-t-2 border-transparent rounded hover:bg-slate-50/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200" %li = link_to "10", "#", class:"py-2 px-4 block border-t-2 border-transparent rounded hover:bg-slate-50/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200" %li.flex-1.flex.justify-end.items-center = link_to "#", class: "flex justify-center items-center space-x-2 py-2 px-4 rounded hover:bg-slate-50/50 group hover:text-primary-600 sm:w-auto w-full sm:bg-transparent bg-slate-50 sm:mt-0 mt-3 dark:hover:bg-slate-500/30 dark:hover:text-slate-200" %span Next = icon "arrow-small-right", class: "w-4 h-4 text-slate-400 group-hover:text-primary-500 dark:group-hover:text-slate-200"

<div class="flex flex-wrap md:justify-between justify-center items-center space-y-2"> <p class="text-slate-600 dark:text-slate-200 text-sm block w-full md:w-auto md:text-left text-center">Viewing page <strong>1</strong> with <strong>24</strong> results per page</p> <nav aria-label="Page navgiation" class="text-slate-500 dark:text-slate-200 md:text-sm text-base font-medium w-auto flex"> <ul class="flex flex-wrap items-center justify-center w-auto divide-x divide-slate-300 shadow-xs dark:divide-slate-600"> <li class="flex justify-start items-center"> <a href="#" class="bg-white inline-flex justify-center items-center md:py-2 py-[.63rem] px-2 rounded-l hover:bg-slate-50/50 group hover:text-primary-600 md:w-auto w-full border-y border-l border-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700 dark:border-slate-600"> <%= icon "arrow-small-left", class: "w-5 h-5 text-slate-400 group-hover:text-primary-500 dark:group-hover:text-slate-200", title: "Previous" %> </a> </li> <li> <a href="#" class="inline-flex items-center py-2 px-4 bg-primary-600 text-white hover:bg-primary-700 border-y border-primary-600 hover:border-primary-700 dark:hover:bg-primary-500">1</a> </li> <li> <a href="#" class="bg-white inline-flex items-center py-2 px-4 border-y border-slate-300 hover:bg-slate-50/50 dark:bg-slate-800 dark:hover:bg-slate-700 dark:border-slate-600">2</a> </li> <li> <a href="#" class="bg-white inline-flex items-center py-2 px-4 border-y border-slate-300 hover:bg-slate-50/50 dark:bg-slate-800 dark:hover:bg-slate-700 dark:border-slate-600">3</a> </li> <li class="md:block hidden"> <span href="#" class="bg-white inline-flex items-center py-2 px-3 border-y border-slate-300 select-none pointer-events-nonehover:bg-slate-50/50 dark:bg-slate-800 dark:border-slate-600">…</span> </li> <li> <a href="#" class="bg-white inline-flex items-center py-2 px-4 border-y border-slate-300 hover:bg-slate-50/50 dark:bg-slate-800 dark:hover:bg-slate-700 dark:border-slate-600">8</a> </li> <li> <a href="#" class="bg-white inline-flex items-center py-2 px-4 border-y border-slate-300 hover:bg-slate-50/50 dark:bg-slate-800 dark:hover:bg-slate-700 dark:border-slate-600">9</a> </li> <li> <a href="#" class="bg-white inline-flex items-center py-2 px-4 border-y border-slate-300 hover:bg-slate-50/50 dark:bg-slate-800 dark:hover:bg-slate-700 dark:border-slate-600">10</a> </li> <li class="flex justify-end items-center"> <a href="#" class="bg-white inline-flex justify-center items-center md:py-2 py-[.63rem] px-2 rounded-r hover:bg-slate-50/50 group hover:text-primary-600 md:w-auto w-full border-y border-r border-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700 dark:border-slate-600"> <%= icon "arrow-small-right", class: "w-5 h-5 text-slate-400 group-hover:text-primary-500 dark:group-hover:text-slate-200", title: "Next" %> </a> </li> </ul> </nav> </div>

<div class="flex flex-wrap md:justify-between justify-center items-center space-y-2"> <p class="text-slate-600 dark:text-slate-200 text-sm block w-full md:w-auto md:text-left text-center">Viewing page <strong>1</strong> with <strong>24</strong> results per page</p> <nav aria-label="Page navgiation" class="text-slate-500 dark:text-slate-200 md:text-sm text-base font-medium w-auto flex"> <ul class="flex flex-wrap items-center justify-center w-auto divide-x divide-slate-300 shadow-xs dark:divide-slate-600"> <li class="flex justify-start items-center"> <%= link_to "#", class: "bg-white inline-flex justify-center items-center md:py-2 py-[.63rem] px-2 rounded-l hover:bg-slate-50/50 group hover:text-primary-600 md:w-auto w-full border-y border-l border-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700 dark:border-slate-600" do %> <%= icon "arrow-small-left", class: "w-5 h-5 text-slate-400 group-hover:text-primary-500 dark:group-hover:text-slate-200", title: "Previous" %> <% end %> </li> <li> <%= link_to "1", "#", class: "inline-flex items-center py-2 px-4 bg-primary-600 text-white hover:bg-primary-700 border-y border-primary-600 hover:border-primary-700 dark:hover:bg-primary-500" %> </li> <li> <%= link_to "2", "#", class: "bg-white inline-flex items-center py-2 px-4 border-y border-slate-300 hover:bg-slate-50/50 dark:bg-slate-800 dark:hover:bg-slate-700 dark:border-slate-600" %> </li> <li> <%= link_to "3", "#", class: "bg-white inline-flex items-center py-2 px-4 border-y border-slate-300 hover:bg-slate-50/50 dark:bg-slate-800 dark:hover:bg-slate-700 dark:border-slate-600" %> </li> <li class="md:block hidden"> <span href="#" class="bg-white inline-flex items-center py-2 px-3 border-y border-slate-300 select-none pointer-events-nonehover:bg-slate-50/50 dark:bg-slate-800 dark:border-slate-600">…</span> </li> <li> <%= link_to "8", "#", class: "bg-white inline-flex items-center py-2 px-4 border-y border-slate-300 hover:bg-slate-50/50 dark:bg-slate-800 dark:hover:bg-slate-700 dark:border-slate-600" %> </li> <li> <%= link_to "9", "#", class: "bg-white inline-flex items-center py-2 px-4 border-y border-slate-300 hover:bg-slate-50/50 dark:bg-slate-800 dark:hover:bg-slate-700 dark:border-slate-600" %> </li> <li> <%= link_to "10", "#", class: "bg-white inline-flex items-center py-2 px-4 border-y border-slate-300 hover:bg-slate-50/50 dark:bg-slate-800 dark:hover:bg-slate-700 dark:border-slate-600" %> </li> <li class="flex justify-end items-center"> <%= link_to "#", class: "bg-white inline-flex justify-center items-center md:py-2 py-[.63rem] px-2 rounded-r hover:bg-slate-50/50 group hover:text-primary-600 md:w-auto w-full border-y border-r border-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700 dark:border-slate-600" do %> <%= icon "arrow-small-right", class: "w-5 h-5 text-slate-400 group-hover:text-primary-500 dark:group-hover:text-slate-200", title: "Next" %> <% end %> </li> </ul> </nav> </div>

.flex.flex-wrap.md:justify-between.justify-center.items-center.space-y-2 %p.text-slate-600.dark:text-slate-200.text-sm.block.w-full.md:w-auto.md:text-left.text-center Viewing page %strong 1 with %strong 24 results per page %nav.text-slate-500.dark:text-slate-200.md:text-sm.text-base.font-medium.w-auto.flex{"aria-label" => "Page navgiation"} %ul.flex.flex-wrap.items-center.justify-center.w-auto.divide-x.divide-slate-300.shadow-xs.dark:divide-slate-600 %li.flex.justify-start.items-center = link_to "#", class: "bg-white inline-flex justify-center items-center md:py-2 py-[.63rem] px-2 rounded-l hover:bg-slate-50/50 group hover:text-primary-600 md:w-auto w-full border-y border-l border-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700 dark:border-slate-600" = icon "arrow-small-left", class: "w-5 h-5 text-slate-400 group-hover:text-primary-500 dark:group-hover:text-slate-200", title: "Previous" %li = link_to "1", "#", class: "inline-flex items-center py-2 px-4 bg-primary-600 text-white hover:bg-primary-700 border-y border-primary-600 hover:border-primary-700 dark:hover:bg-primary-500" %li = link_to "2", "#", class: "bg-white inline-flex items-center py-2 px-4 border-y border-slate-300 hover:bg-slate-50/50 dark:bg-slate-800 dark:hover:bg-slate-700 dark:border-slate-600" %li = link_to "3", "#", class: "bg-white inline-flex items-center py-2 px-4 border-y border-slate-300 hover:bg-slate-50/50 dark:bg-slate-800 dark:hover:bg-slate-700 dark:border-slate-600" %li.md:block.hidden %span.bg-white.inline-flex.items-center.py-2.px-3.border-y.border-slate-300.select-none.dark:bg-slate-800.dark:border-slate-600{class: "pointer-events-nonehover:bg-slate-50/50", href: "#"} … %li = link_to "8", "#", class: "bg-white inline-flex items-center py-2 px-4 border-y border-slate-300 hover:bg-slate-50/50 dark:bg-slate-800 dark:hover:bg-slate-700 dark:border-slate-600" %li = link_to "9", "#", class: "bg-white inline-flex items-center py-2 px-4 border-y border-slate-300 hover:bg-slate-50/50 dark:bg-slate-800 dark:hover:bg-slate-700 dark:border-slate-600" %li = link_to "10", "#", class: "bg-white inline-flex items-center py-2 px-4 border-y border-slate-300 hover:bg-slate-50/50 dark:bg-slate-800 dark:hover:bg-slate-700 dark:border-slate-600" %li.flex.justify-end.items-center = link_to "#", class: "bg-white inline-flex justify-center items-center md:py-2 py-[.63rem] px-2 rounded-r hover:bg-slate-50/50 group hover:text-primary-600 md:w-auto w-full border-y border-r border-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700 dark:border-slate-600" = icon "arrow-small-right", class: "w-5 h-5 text-slate-400 group-hover:text-primary-500 dark:group-hover:text-slate-200", title: "Next"

<% link = pagy_link_proc(pagy) %> <nav aria-label="pager" class="text-slate-500 sm:text-sm text-base font-medium" role="navigation"> <div class="flex flex-wrap items-center sm:justify-between justify-center"> <% if pagy.prev %> <div class="sm:flex-1 flex justify-start items-center sm:w-auto w-full"> <%== link.call(pagy.prev, pagy_t('pagy.nav.prev'), 'aria-label="previous" class="flex justify-center items-center gap-2 py-2 px-4 rounded hover:bg-slate-50/50 group hover:text-primary-600 sm:w-auto w-full sm:bg-transparent bg-slate-50 sm:mb-0 mb-3 dark:hover:bg-primary-600 dark:hover:text-white dark:bg-primary-600 dark:text-white"') %> </div> <% else %> <div class="sm:flex-1 flex justify-start items-center sm:w-auto w-full"> <span class="opacity-40 dark:opacity-60 flex justify-center items-center gap-2 py-2 px-4 rounded sm:w-auto w-full bg-transparent sm:mb-0 mb-3 pointer-events-none select-none"> <%== pagy_t('pagy.nav.prev') %> </span> </div> <% end %>  <% pagy.series.each do |item| %> <% if item.is_a?(Integer) %> <%== link.call(item, item, 'class="py-2 px-4 block border-t-2 border-transparent rounded hover:bg-slate-50/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200"') %> <% elsif item.is_a?(String) %> <span class="py-2 px-4 border-t-2 border-transparent block border-primary-500 hover:bg-primary-50/50 text-primary-600 dark:hover:bg-primary-600 dark:hover:text-white dark:hover:border-primary-600 dark:text-primary-400"><%= item %></span> <% elsif item == :gap %> <span class="py-2 px-4 block border-t-2 border-transparent rounded pointer-events-none select-none"><%== pagy_t('pagy.nav.gap') %></span> <% end %> <% end %> <% if pagy.next %> <div class="sm:flex-1 flex justify-end items-center sm:w-auto w-full"> <%== link.call(pagy.next, pagy_t('pagy.nav.next'), 'aria-label="next" class="flex justify-center items-center gap-2 py-2 px-4 rounded hover:bg-slate-50/50 group hover:text-primary-600 sm:w-auto w-full sm:bg-transparent bg-slate-50 sm:mt-0 mt-3 dark:hover:bg-primary-600 dark:hover:text-white dark:bg-primary-600 dark:text-white"') %> </div> <% else %> <div class="sm:flex-1 flex justify-end items-center sm:w-auto w-full"> <span class="opacity-40 dark:opacity-60 flex justify-center items-center gap-2 py-2 px-4 rounded sm:w-auto w-full bg-transparent sm:mt-0 mt-3 pointer-events-none select-none"> <%== pagy_t('pagy.nav.next') %> </span> </div> <% end %> </div> </nav>

/ Source: https://github.com/ddnexus/pagy/blob/master/lib/templates/nav.html.erb - link = pagy_link_proc(pagy) %nav.text-slate-500.sm:text-sm.text-base.font-medium{"aria-label" => "pager", role: "navigation"} .flex.flex-wrap.items-center.sm:justify-between.justify-center - if pagy.prev .sm:flex-1.flex.justify-start.items-center.sm:w-auto.w-full != link.call(pagy.prev, pagy_t('pagy.nav.prev'), 'aria-label="previous" class="flex justify-center items-center gap-2 py-2 px-4 rounded hover:bg-slate-50/50 group hover:text-primary-600 sm:w-auto w-full sm:bg-transparent bg-slate-50 sm:mb-0 mb-3 dark:hover:bg-primary-600 dark:hover:text-white dark:bg-primary-600 dark:text-white"') - else .sm:flex-1.flex.justify-start.items-center.sm:w-auto.w-full %span.opacity-40.dark:opacity-60.flex.justify-center.items-center.gap-2.py-2.px-4.rounded.sm:w-auto.w-full.bg-transparent.sm:mb-0.mb-3.pointer-events-none.select-none != pagy_t('pagy.nav.prev') / series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36] - pagy.series.each do |item| - if item.is_a?(Integer) != link.call(item, item, 'class="py-2 px-4 block border-t-2 border-transparent rounded hover:bg-slate-50/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200"') - elsif item.is_a?(String) %span.py-2.px-4.border-t-2.border-transparent.block.border-primary-500.text-primary-600.dark:hover:bg-primary-600.dark:hover:text-white.dark:hover:border-primary-600.dark:text-primary-400{class: "hover:bg-primary-50/50"}= item - elsif item == :gap %span.py-2.px-4.block.border-t-2.border-transparent.rounded.pointer-events-none.select-none!= pagy_t('pagy.nav.gap') - if pagy.next .sm:flex-1.flex.justify-end.items-center.sm:w-auto.w-full != link.call(pagy.next, pagy_t('pagy.nav.next'), 'aria-label="next" class="flex justify-center items-center gap-2 py-2 px-4 rounded hover:bg-slate-50/50 group hover:text-primary-600 sm:w-auto w-full sm:bg-transparent bg-slate-50 sm:mt-0 mt-3 dark:hover:bg-primary-600 dark:hover:text-white dark:bg-primary-600 dark:text-white"') - else .sm:flex-1.flex.justify-end.items-center.sm:w-auto.w-full %span.opacity-40.dark:opacity-60.flex.justify-center.items-center.gap-2.py-2.px-4.rounded.sm:w-auto.w-full.bg-transparent.sm:mt-0.mt-3.pointer-events-none.select-none != pagy_t('pagy.nav.next')

Pagination

Simple

Contained

Pagy gem

On this page