Pagination

Navigation controls for moving between pages of content.

Source Tailwind CSS

package showcase

import "github.com/templui/templui/internal/components/pagination"

templ PaginationDefault() {
	@pagination.Pagination(pagination.Props{
		Class: "mt-8",
	}) {
		@pagination.Content() {
			@pagination.Item() {
				@pagination.Previous(pagination.PreviousProps{
					Href:     "?page=1",
					Disabled: false,
					Label:    "Previous",
				})
			}
			@pagination.Item() {
				@pagination.Link(pagination.LinkProps{
					Href: "?page=1",
				}) {
					1
				}
			}
			@pagination.Item() {
				@pagination.Link(pagination.LinkProps{
					Href:     "?page=2",
					IsActive: true,
				}) {
					2
				}
			}
			@pagination.Item() {
				@pagination.Link(pagination.LinkProps{
					Href: "?page=3",
				}) {
					3
				}
			}
			@pagination.Item() {
				@pagination.Ellipsis()
			}
			@pagination.Item() {
				@pagination.Next(pagination.NextProps{
					Href:  "?page=3",
					Label: "Next",
				})
			}
		}
	}
}

Installation

templui add pagination

Examples

With Helper

package showcase

import (
	"fmt"
	"github.com/templui/templui/internal/components/pagination"
)

templ PaginationWithHelper() {
	{{ p := pagination.CreatePagination(5, 20, 3) }}
	@pagination.Pagination() {
		@pagination.Content() {
			@pagination.Item() {
				@pagination.Previous(pagination.PreviousProps{
					Href:     fmt.Sprintf("?page=%d", p.CurrentPage-1),
					Disabled: !p.HasPrevious,
					Label:    "Previous",
				})
			}
			// First page with ellipsis if needed
			if p.Pages[0] > 1 {
				@pagination.Item() {
					@pagination.Link(pagination.LinkProps{
						Href: "?page=1",
					}) {
						1
					}
				}
				if p.Pages[0] > 2 {
					@pagination.Item() {
						@pagination.Ellipsis()
					}
				}
			}
			// Visible pages
			for _, page := range p.Pages {
				@pagination.Item() {
					@pagination.Link(pagination.LinkProps{
						Href:     fmt.Sprintf("?page=%d", page),
						IsActive: page == p.CurrentPage,
					}) {
						{ fmt.Sprint(page) }
					}
				}
			}
			// Last page with ellipsis if needed
			if p.Pages[len(p.Pages)-1] < p.TotalPages {
				if p.Pages[len(p.Pages)-1] < p.TotalPages-1 {
					@pagination.Item() {
						@pagination.Ellipsis()
					}
				}
				@pagination.Item() {
					@pagination.Link(pagination.LinkProps{
						Href: fmt.Sprintf("?page=%d", p.TotalPages),
					}) {
						{ fmt.Sprint(p.TotalPages) }
					}
				}
			}
			@pagination.Item() {
				@pagination.Next(pagination.NextProps{
					Href:     fmt.Sprintf("?page=%d", p.CurrentPage+1),
					Disabled: !p.HasNext,
					Label:    "Next",
				})
			}
		}
	}
}

API Reference

Required parameter

Hover for description

Pagination

Root navigation container for pagination controls.

Name	Type	Default
`ID` Unique identifier for the pagination nav element.	`string`	-
`Class` Additional CSS classes to apply to the pagination container.	`string`	-
`Attributes` Additional HTML attributes to apply to the pagination element.	`templ.Attributes`	-

Content

List container that holds pagination items.

Name	Type	Default
`ID` Unique identifier for the content list element.	`string`	-
`Class` Additional CSS classes to apply to the content list.	`string`	-
`Attributes` Additional HTML attributes to apply to the content element.	`templ.Attributes`	-

Item

Individual list item that wraps pagination links or buttons.

Name	Type	Default
`ID` Unique identifier for the item element.	`string`	-
`Class` Additional CSS classes to apply to the item.	`string`	-
`Attributes` Additional HTML attributes to apply to the item element.	`templ.Attributes`	-

Link

Clickable link or button for page navigation.

Name	Type	Default
`ID` Unique identifier for the link element.	`string`	-
`Class` Additional CSS classes to apply to the link.	`string`	-
`Attributes` Additional HTML attributes to apply to the link element.	`templ.Attributes`	-
`Href` URL for the page link. Required for functional links.	`string`	-
`IsActive` Whether this page link represents the current page.	`bool`	`false`
`Disabled` Whether the link is disabled and non-clickable.	`bool`	`false`

Navigation button for going to the previous page.

Name	Type	Default
`ID` Unique identifier for the previous button.	`string`	-
`Class` Additional CSS classes to apply to the button.	`string`	-
`Attributes` Additional HTML attributes to apply to the button element.	`templ.Attributes`	-
`Href` URL for the previous page.	`string`	-
`Disabled` Whether the previous button is disabled (e.g., on first page).	`bool`	`false`
`Label` Text label to display alongside the chevron icon.	`string`	-

Navigation button for going to the next page.

Name	Type	Default
`ID` Unique identifier for the next button.	`string`	-
`Class` Additional CSS classes to apply to the button.	`string`	-
`Attributes` Additional HTML attributes to apply to the button element.	`templ.Attributes`	-
`Href` URL for the next page.	`string`	-
`Disabled` Whether the next button is disabled (e.g., on last page).	`bool`	`false`
`Label` Text label to display alongside the chevron icon.	`string`	-

Menu

Getting Started

Components

Pagination

Installation

Examples

API Reference

Content

Item

Link

Previous

Next