Demo
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!-- First Page -->
<nav aria-label="Pagination">
  <ul class="flex -space-x-px text-sm">
    <li><span 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 opacity-50 cursor-not-allowed" aria-disabled="true"><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></span></li>
    <li><a href="?page=1" 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">1</a></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-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">3</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=2"><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>
<!-- Middle Page -->
<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=4"><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=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><a href="?page=5" 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">5</a></li>
    <li><a href="?page=6" 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">6</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=6"><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>
<!-- Last Page -->
<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=9"><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=8" 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">8</a></li>
    <li><a href="?page=9" 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">9</a></li>
    <li><a href="?page=10" 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">10</a></li>
    <li><span 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 opacity-50 cursor-not-allowed" aria-disabled="true"><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></span></li>
  </ul>
</nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# First Page
render(Flowbite::Pagination.new(next_url: "?page=2")) do |pagination|
  pagination.with_page { render_to_string(Flowbite::Pagination::Link.new(page: 1, url: "?page=1", current: true)) }
  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")) }
  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
# Middle Page
render(Flowbite::Pagination.new(previous_url: "?page=4", next_url: "?page=6")) 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: 4, url: "?page=4")) }
  pagination.with_page { render_to_string(Flowbite::Pagination::Link.new(page: 5, url: "?page=5", current: true)) }
  pagination.with_page { render_to_string(Flowbite::Pagination::Link.new(page: 6, url: "?page=6")) }
  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
# Last Page
render(Flowbite::Pagination.new(previous_url: "?page=9")) 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: 8, url: "?page=8")) }
  pagination.with_page { render_to_string(Flowbite::Pagination::Link.new(page: 9, url: "?page=9")) }
  pagination.with_page { render_to_string(Flowbite::Pagination::Link.new(page: 10, url: "?page=10", current: true)) }
end

The caller decides which pages to show, including where to place gaps, and whether the previous/next links are enabled. These examples always show the first and last page, and a window of pages around the current page.

No params configured.