Pagination
Show entries in pages with visitor-facing controls or developer-configured limits.
Advanced Timeline Features (Page 2)
Ready to take your timeline to the next level? Learn how to handle hundreds of entries, group by time periods, and optimize performance.
When Basic Timelines Aren't Enough
The Timeline component was designed for 4-8 major milestones, but what if you have 50? 100? What if you're using it like a blog with multiple entries per day? That's where these advanced features come in.
This page covers pagination, grouping, date formats, and performance considerations for timeline-heavy sites.
What You Can Do
Group by Year
Organize hundreds of entries by year with year headers and optional pagination.
Group by Month
Group entries by month for fine-grained organization of frequent milestones.
Date Range Filter
Show only entries within specific date ranges (e.g., "Our 2020s Timeline").
Date Formats
Choose full dates, month/year, or year-only display per entry or globally.
Performance
Handle hundreds of entries with smart pagination and static generation.
Pagination in Action (Page 2 of 3)
Clear Path Forward
While cleaning up my kid's toys, I thought about the importance of simple and clear instructions. When I communicate to my son, I need to distill my words and remove fluff. Keep it simple or he'll just ignore me or misunderstand. That's the same thing for businesses. They need a clear roadmap ahead.
Brainstorming
Later that evening, I went to work. I jotted down what I know (marketing) and listed down the problems I often see from my work. The biggest culprit—presence. With people's behaviors changing and moving more to online/digital transactions, local businesses need to have a presence online. They need to get found.
What You're Seeing
The timeline above shows 2 entries per page (we have 4 total = 2 pages). Use the pagination controls below the timeline to navigate between pages. Notice:
- Page 1 shows entries 1-2 (← button disabled, → button active)
- Page 2 shows entries 3-4 (← button active, → button disabled)
- Current page is highlighted in primary color
- Fast performance - all pages pre-generated at build time (SSG)
<Timeline
heading="Your Timeline Title"
layout="vertical"
paginateBy=2
showPagination=true
currentPage=2
/>Ready for More Examples?
Scroll down to see code examples for pagination, grouping, date formats, and performance optimization. Or jump back to page 1 to see the full guide.