Navigation v1.0.0

Pagination

Page navigation component for data sets. Supports numbered pages with ellipsis gaps, simple prev/next navigation, and cursor-based load-more patterns. Integrates with Turbo Frames for seamless page transitions.

Numbered

Full pagination with page numbers, ellipsis gaps, prev/next arrows, and per-page size selector

Options

Name Type Default Description
current_page * Integer required The current active page number
total_pages * Integer required Total number of pages
base_url String "#" Base URL pattern. Page number appended as ?page=N
turbo_frame String Target Turbo Frame ID for navigation
window_size Integer 2 Number of pages to show on each side of current page

Simple

Prev/Next buttons only with page X of Y text. Clean and minimal.

Options

Name Type Default Description
current_page * Integer required Current page number
total_pages * Integer required Total number of pages
prev_url String URL for previous page
next_url String URL for next page
turbo_frame String Target Turbo Frame ID

Cursor

Load More button with optional auto-load. No page numbers.

Options

Name Type Default Description
next_url String URL to load more items
loading_text String "Loading..." Text shown during loading
load_more_text String "Load More" Button text
turbo_frame String Target Turbo Frame ID
auto_load Boolean false Auto-load when button enters viewport

Changelog v1.0.0

- v1.0.0: Initial release with numbered, simple, and cursor styles

Get Full Access

Unlock the source code for this component and all others. One-time payment for lifetime access.

Get Access Now