Components

Pagination

Theme

Hound

Framework

Tailwind CSS

Quicklinks

Quickly navigate to different pagination patterns below

Pagination

Simple

.html
.html.erb
.haml.erb

<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-indigo-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", classes: "w-4 h-4 text-slate-400 group-hover:text-indigo-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-indigo-500 hover:bg-indigo-50/50 text-indigo-600 dark:text-indigo-400 dark:border-indigo-400 dark:hover:bg-indigo-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">&hellip;</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-indigo-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", classes: "w-4 h-4 text-slate-400 group-hover:text-indigo-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-indigo-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", classes: "w-4 h-4 text-slate-400 group-hover:text-indigo-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-indigo-500 hover:bg-indigo-50/50 text-indigo-600 dark:text-indigo-400 dark:border-indigo-400 dark:hover:bg-indigo-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">&hellip;</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-indigo-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", classes: "w-4 h-4 text-slate-400 group-hover:text-indigo-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-indigo-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", classes: "w-4 h-4 text-slate-400 group-hover:text-indigo-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-indigo-500 hover:bg-indigo-50/50 text-indigo-600 dark:text-indigo-400 dark:border-indigo-400 dark:hover:bg-indigo-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-indigo-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", classes: "w-4 h-4 text-slate-400 group-hover:text-indigo-500 dark:group-hover:text-slate-200"

Pagination

Contained

Viewing page 1 with 24 results per page

.html
.html.erb
.haml.erb

<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-sm 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-indigo-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", classes: "w-5 h-5 text-slate-400 group-hover:text-indigo-500 dark:group-hover:text-slate-200", title: "Previous" %>
        </a>
      </li>
      <li>
        <a href="#" class="inline-flex items-center py-2 px-4 bg-indigo-600 text-white hover:bg-indigo-700 border-y border-indigo-600 hover:border-indigo-700 shadow-inner dark:hover:bg-indigo-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">&hellip;</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-indigo-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", classes: "w-5 h-5 text-slate-400 group-hover:text-indigo-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-sm 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-indigo-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", classes: "w-5 h-5 text-slate-400 group-hover:text-indigo-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-indigo-600 text-white hover:bg-indigo-700 border-y border-indigo-600 hover:border-indigo-700 shadow-inner dark:hover:bg-indigo-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">&hellip;</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-indigo-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", classes: "w-5 h-5 text-slate-400 group-hover:text-indigo-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-sm.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-indigo-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", classes: "w-5 h-5 text-slate-400 group-hover:text-indigo-500 dark:group-hover:text-slate-200", title: "Previous"
      %li
        = link_to "1", "#", class: "inline-flex items-center py-2 px-4 bg-indigo-600 text-white hover:bg-indigo-700 border-y border-indigo-600 hover:border-indigo-700 shadow-inner dark:hover:bg-indigo-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-indigo-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", classes: "w-5 h-5 text-slate-400 group-hover:text-indigo-500 dark:group-hover:text-slate-200", title: "Next"

Pagination

Dark

Viewing page 1 with 24 results per page

Pagination

Pagy Gem

Pagy is a popular pagination solution for Ruby/Rails developers. The nav partial from the gem comes ready to use with Rails UI.

To make use of this UI you will need to render an alternative partial containing the code below with the @pagy instance variable passed through as a local variable inside the partial.

.html.erb
.haml.erb

<!-- Source: https://github.com/ddnexus/pagy/blob/master/lib/templates/nav.html.erb -->

<% 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 space-x-2 py-2 px-4 rounded hover:bg-slate-50/50 group hover:text-indigo-600 sm:w-auto w-full sm:bg-transparent bg-slate-50 sm:mb-0 mb-3 dark:hover:bg-indigo-600 dark:hover:text-white dark:bg-indigo-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 space-x-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 %>

  <!-- 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 class="py-2 px-4 border-t-2 border-transparent block border-indigo-500 hover:bg-indigo-50/50 text-indigo-600 dark:hover:bg-indigo-600 dark:hover:text-white dark:hover:border-indigo-600 dark:text-indigo-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 space-x-2 py-2 px-4 rounded hover:bg-slate-50/50 group hover:text-indigo-600 sm:w-auto w-full sm:bg-transparent bg-slate-50 sm:mt-0 mt-3 dark:hover:bg-indigo-600 dark:hover:text-white dark:bg-indigo-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 space-x-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 space-x-2 py-2 px-4 rounded hover:bg-slate-50/50 group hover:text-indigo-600 sm:w-auto w-full sm:bg-transparent bg-slate-50 sm:mb-0 mb-3 dark:hover:bg-indigo-600 dark:hover:text-white dark:bg-indigo-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.space-x-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-indigo-500.text-indigo-600.dark:hover:bg-indigo-600.dark:hover:text-white.dark:hover:border-indigo-600.dark:text-indigo-400{class: "hover:bg-indigo-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 space-x-2 py-2 px-4 rounded hover:bg-slate-50/50 group hover:text-indigo-600 sm:w-auto w-full sm:bg-transparent bg-slate-50 sm:mt-0 mt-3 dark:hover:bg-indigo-600 dark:hover:text-white dark:bg-indigo-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.space-x-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')

Navigation

Tabs