Demo
x
1
2
3
4
5
6
7
8
9
10
11
12
13
<nav aria-label="Pagination">
  <ul class="flex -space-x-px text-sm">
    <li><a class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading font-medium rounded-s-base text-sm w-9 h-9 focus:outline-none" href="?page=2"><span class="sr-only">Previous</span><svg class="w-4 h-4 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 19-7-7 7-7" /></svg></a></li>
    <li><a href="?page=1" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading font-medium text-sm w-9 h-9 focus:outline-none">1</a></li>
    <li class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading font-medium text-sm w-9 h-9 focus:outline-none">…</li>
    <li><a href="?page=2" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading font-medium text-sm w-9 h-9 focus:outline-none">2</a></li>
    <li><a href="?page=3" class="flex items-center justify-center text-fg-brand bg-neutral-tertiary-medium box-border border border-default-medium hover:text-fg-brand font-medium text-sm w-9 h-9 focus:outline-none" aria-current="page">3</a></li>
    <li><a href="?page=4" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading font-medium text-sm w-9 h-9 focus:outline-none">4</a></li>
    <li class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading font-medium text-sm w-9 h-9 focus:outline-none">…</li>
    <li><a href="?page=10" class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading font-medium text-sm w-9 h-9 focus:outline-none">10</a></li>
    <li><a class="flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading font-medium rounded-e-base text-sm w-9 h-9 focus:outline-none" href="?page=4"><span class="sr-only">Next</span><svg class="w-4 h-4 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" /></svg></a></li>
  </ul>
</nav>
1
2
3
4
5
6
7
8
9
render(Flowbite::Pagination.new(previous_url: "?page=2", next_url: "?page=4")) do |pagination|
  pagination.with_page { render_to_string(Flowbite::Pagination::Link.new(page: 1, url: "?page=1")) }
  pagination.with_page { render_to_string(Flowbite::Pagination::Gap.new) }
  pagination.with_page { render_to_string(Flowbite::Pagination::Link.new(page: 2, url: "?page=2")) }
  pagination.with_page { render_to_string(Flowbite::Pagination::Link.new(page: 3, url: "?page=3", current: true)) }
  pagination.with_page { render_to_string(Flowbite::Pagination::Link.new(page: 4, url: "?page=4")) }
  pagination.with_page { render_to_string(Flowbite::Pagination::Gap.new) }
  pagination.with_page { render_to_string(Flowbite::Pagination::Link.new(page: 10, url: "?page=10")) }
end

No notes provided.

No params configured.