---
title: "Timeline UI: anatomy, variants and examples | Kombai"
description: "A timeline lays events or milestones out in order along a line, so people can see what happened when and what comes next."
canonical_url: https://kombai.com/glossary/timeline/
author: "The Kombai Team"
---

# Timeline

A timeline lays events or milestones out in order along a line, so people can see what happened when and what comes next.

- Also called: roadmap
- Platforms: Web, Mobile
- In the Kombai gallery: [56 web designs](https://kombai.com/gallery/web/timeline-roadmap/), [33 mobile designs](https://kombai.com/gallery/mobile/timeline-roadmap/)

- [Planora](https://kombai.com/gallery/inspirations/timeline-roadmap-web-6/) (Web)
- [Vaskeld](https://kombai.com/gallery/inspirations/timeline-roadmap-ios-25/) (Mobile)
- [Pace](https://kombai.com/gallery/inspirations/timeline-roadmap-web-3/) (Web)

## 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.

## When to use timeline

- **History and activity.** Who did what to an order, a file or a ticket, and when.
- **Plans and roadmaps.** Milestones ahead, with what is done and what is next.
- **Stories.** A company's or a person's milestones, told in order on an about page.

## When not to use one

- **Undated lists.** If time does not matter, a plain list or table is easier to scan.
- **Detailed schedules.** For overlapping events by the hour, use a calendar.
- **Steps people fill in.** For a form split into steps, use a progress indicator.

## Anatomy

1. **Rail**: The line that joins events
2. **Marker**: Dot or icon, shows state
3. **Timestamp**: Date or time of the event
4. **Content**: Title, detail, avatar
5. **Current marker**: Where things stand now
6. **States**: Done, current, upcoming, focus

## Variants

We sorted every timeline design in the Kombai gallery and found four patterns.

### 1. Horizontal milestone rails

Events strung left to right along one line, with labels above and below. Common for roadmaps and project tracks.

- [Voltane](https://kombai.com/gallery/inspirations/timeline-roadmap-web-2/) (Web)
- [Astreon](https://kombai.com/gallery/inspirations/timeline-roadmap-web-4/) (Web)
- [Vindholt](https://kombai.com/gallery/inspirations/timeline-roadmap-web-45/) (Web)

### 2. Winding paths

An illustrated road or dashed path that curves down the page, with milestones or sessions placed along it.

- [Novaterra](https://kombai.com/gallery/inspirations/timeline-roadmap-web-1/) (Web)
- [Skylark](https://kombai.com/gallery/inspirations/timeline-roadmap-web-5/) (Web)
- [Fernly](https://kombai.com/gallery/inspirations/timeline-roadmap-ios-3/) (Mobile)

### 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.

- [Sorrelbox](https://kombai.com/gallery/inspirations/timeline-roadmap-ios-13/) (Mobile)
- [Dunmoss](https://kombai.com/gallery/inspirations/timeline-roadmap-ios-32/) (Mobile)
- [Kettlewick](https://kombai.com/gallery/inspirations/timeline-roadmap-web-32/) (Web)

### 4. Step and progress timelines

Checkpoints that fill in as they complete, used for learning paths, build progress and job stages.

- [Loopwell](https://kombai.com/gallery/inspirations/timeline-roadmap-ios-1/) (Mobile)
- [Tendril](https://kombai.com/gallery/inspirations/timeline-roadmap-ios-2/) (Mobile)
- [Fjelsted](https://kombai.com/gallery/inspirations/timeline-roadmap-web-48/) (Web)

## Where timelines show up

### Changelogs

Release notes grouped by date on a vertical rail, with tags for features and fixes.

- [Feldspire](https://kombai.com/gallery/inspirations/timeline-roadmap-web-10/) (Web)
- [Cindermark](https://kombai.com/gallery/inspirations/timeline-roadmap-web-39/) (Web)
- [Cairnpost](https://kombai.com/gallery/inspirations/timeline-roadmap-web-40/) (Web)

### Personal records

Workouts, weigh-ins and credits pinned to dates, so people can see their own history at a glance.

- [Ilmere](https://kombai.com/gallery/inspirations/timeline-roadmap-ios-24/) (Mobile)
- [Grendlow](https://kombai.com/gallery/inspirations/timeline-roadmap-ios-26/) (Mobile)
- [Pomewood](https://kombai.com/gallery/inspirations/timeline-roadmap-ios-12/) (Mobile)

### Version history

Saved versions of a file listed by time, with the live one marked and a way to restore any other.

- [Noilan](https://kombai.com/gallery/inspirations/timeline-roadmap-web-22/) (Web)
- [Solstrix](https://kombai.com/gallery/inspirations/timeline-roadmap-web-18/) (Web)
- [Selvedra](https://kombai.com/gallery/inspirations/timeline-roadmap-web-23/) (Web)

## Timeline vs similar components

| | [Timeline](https://kombai.com/glossary/timeline/) | [Stacked list](https://kombai.com/glossary/stacked-list/) | [Progress indicator](https://kombai.com/glossary/progress-indicator/) |
|---|---|---|---|
| Shows | Events in time order | Rows of the same kind | How far along one task is |
| Order | Always by date | Any order, often sortable | Fixed steps |
| Best for | Activity, roadmaps, stories | Messages, contacts, results | Uploads, setup, checkout |

## 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

- [Progress indicator](https://kombai.com/glossary/progress-indicator/)
- [Stacked list](https://kombai.com/glossary/stacked-list/)
- [Calendar](https://kombai.com/glossary/calendar/)
- [Kanban board](https://kombai.com/glossary/kanban-board/)

## References

- [MDN: The ordered list element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol)
- [MDN: The time element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time)