Timelines from the Kombai gallery: a startup's milestones on a horizontal line, an actor's credits on a dotted rail and a product roadmap on a date grid.
What is a timeline?
A timeline is a line, vertical or horizontal, with a marker for each event and a date beside it. Each marker carries a short title and sometimes a description, an avatar or an image. The line shows order at a glance, and the marker style can show state: done, current or still to come.
- A continuous line or rail that connects the events in order.
- Dates or times on every entry, newest first in feeds and oldest first in stories.
Timelines show up across timelines and roadmaps, timeline and history, order details and changelogs screens.
When to use a timeline
- History and activityWho did what to an order, a file or a ticket, and when.
- Plans and roadmapsMilestones ahead, with what is done and what is next.
- StoriesA company's or a person's milestones, told in order on an about page.
When not to use one
- Undated listsIf time does not matter, a plain list or table is easier to scan.
- Detailed schedulesFor overlapping events by the hour, use a calendar.
- Steps people fill inFor a form split into steps, use a progress indicator.
Anatomy of a timeline
This one works. Expand an entry for its detail, or advance the order to move the current marker.
Order #2184
2 items, paid with Visa ending 4192.
Packed at the Rotterdam warehouse.
Handed to the courier. Tracking number RT 4471 0928.
With your driver. Expected between 1 and 3 PM.
Left with you or in your safe place.
- Done
- Current
- Upcoming
- ShippedKeyboard focus
- RailThe line that joins events
- MarkerDot or icon, shows state
- TimestampDate or time of the event
- ContentTitle, detail, avatar
- Current markerWhere things stand now
- StatesDone, current, upcoming, focus
Timeline variants
We sorted every timeline design in the Kombai gallery and found four patterns. Browse all 56 web and 33 mobile designs.
1. Horizontal milestone rails
Events strung left to right along one line, with labels above and below. Common for roadmaps and project tracks.
2. Winding paths
An illustrated road or dashed path that curves down the page, with milestones or sessions placed along it.
3. Vertical activity rails
A thin rail down the left side with a dot per event, each beside a short card or line of text. The default for logs.
4. Step and progress timelines
Checkpoints that fill in as they complete, used for learning paths, build progress and job stages.
Where timelines show up
Changelogs
Release notes grouped by date on a vertical rail, with tags for features and fixes.
Personal records
Workouts, weigh-ins and credits pinned to dates, so people can see their own history at a glance.
Version history
Saved versions of a file listed by time, with the live one marked and a way to restore any other.
Timeline vs similar components
Build notes
- Mark it up as an ordered list (<ol>), one <li> per event, so screen readers announce the count and order.
- Put each date in a <time> element with a machine-readable datetime attribute.
- Draw the rail and markers with CSS and hide them from assistive tech. The list carries the meaning.
- Show state with marker shape as well as color: a check for done, a ring for current, hollow for upcoming.
- Use aria-current="step" on the current milestone in a roadmap or progress timeline.
- On narrow screens, turn horizontal timelines into vertical ones instead of scrolling sideways.
FAQ
Should a timeline be vertical or horizontal?
Vertical works on every screen size and suits activity feeds and long histories. Horizontal reads well for a handful of milestones on a wide screen, like a roadmap or a company story, but should switch to vertical on phones.
Newest first or oldest first?
Activity feeds, logs and changelogs show the newest event first, because people come to see what changed. Stories and roadmaps run oldest first, because they read as a sequence.
What is the difference between a timeline and a step progress indicator?
A timeline records events that happen over time, whether or not anyone acts. A step progress indicator walks one person through a task they complete themselves, like checkout. Some designs blend them, such as a learning path whose checkpoints fill in as lessons are done.
How do I keep a long timeline usable?
Group entries under date headings, collapse detail by default and load older events on demand. A filter by event type helps on busy activity logs.
Related terms
All glossary terms · Browse 56 web and 33 mobile timeline designs