Loading pattern...

What is Timeline?

Timelines organize content chronologically along a vertical or horizontal axis. Each item is plotted by time/date. Common for activity feeds, history views, project roadmaps, changelogs. Can be linear (Twitter feed) or branching (Git history). Great for temporal data.

When Should You Use This?

Use timelines for activity feeds (social media, notifications), audit logs (who did what when), project history (Git commits, document versions), roadmaps (product releases over time), or any content where chronology matters. Vertical timelines for feeds, horizontal for roadmaps. Always include timestamps and group by time periods (Today, Yesterday, Last Week).

Common Mistakes to Avoid

  • No time grouping—long timelines need sections (Today, This Week, etc.)
  • Missing timestamps—users need exact times, not just "2 days ago"
  • Poor infinite scroll—timeline should load more as you scroll (lazy loading)
  • No filtering—timelines get noisy; add filters (event type, person, date range)
  • Horizontal on mobile—horizontal timelines don't fit mobile; switch to vertical

Real-World Examples

  • Twitter/X—vertical timeline of tweets, reverse chronological
  • Linear—activity timeline on issues showing all changes over time
  • GitHub—commit history timeline with branching for PRs
  • Notion—page history showing all edits chronologically

Category

Information Architecture

Tags

timelinechronologicalactivity-feedhistoryui-pattern

Permalink