Timeline

Vertical / horizontal sequence of events. Bind an :items array for the built-in row layout (marker + title + description, with the timestamp opposite the line), or author items declaratively with <BsTimelineItem> and per-region slots. Customise any region with a scoped slot, opt into selection with selectable, and flip render order with reverse.

Playground

Toggle each input with a <BsSelect> or <BsCheckbox> and watch the single live timeline — and the copyable snippet beneath it — update to match.

ReverseCustom markersCard content
Keyboard shortcuts
  • The timeline is only keyboard-interactive while Selectable is single or multiple. With none it renders as a plain list — the items carry no tabindex and take no focus.
  • Tab — enter the timeline; exactly one item holds the tab stop (roving tabindex)
  • / — next item · / — previous item. Both axes do the same thing whatever the orientation; movement wraps around the ends and skips disabled items.
  • Home / End — first / last enabled item
  • Enter — select the focused item, replacing the current selection
  • Space — with multiple, adds or removes the focused item; with single it behaves like Enter
  • Shift + Enter / Shift + Space — with multiple, adds every enabled item between the anchor and the focused item
  • Ctrl/ + click — toggle one item · Shift + click — range-select from the anchor

Declarative authoring

Instead of binding :items, drop <BsTimelineItem> children directly inside <BsTimeline> and project into the named slots. Handy when each item's markup is bespoke rather than uniform.

Kickoff
Project scoping and team assembly.
2026-01-10
Shipped v1
First public release.
2026-05-01