Timeline

<ui5-timeline> | Since 0.8.0

The ui5-timeline component shows entries (such as objects, events, or posts) in chronological order. A common use case is to provide information about changes to an object, or events related to an object. These entries can be generated by the system (for example, value XY changed from A to B), or added manually. There are two distinct variants of the timeline: basic and social. The basic timeline is read-only, while the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.

Header and Info Bar Slots

The Timeline exposes two named slots above the items area:

• header — for a controls bar (search field, filter trigger, sort toggle, etc.). The most common pattern is to place a ui5-toolbar containing a search input and buttons that open a filter dialog or toggle sort direction. The Timeline itself performs no filtering, sorting, or searching — the application listens for events from its own controls and reorders, hides, or adds items in the default slot accordingly.

• infoBar — for a status bar that reflects the result of the controls (active filters, applied sort, current search query). Typically contains tokens, labels, or a ui5-bar.

The Timeline itself does not filter, sort, or search — the application owns that logic. Use stickyHeader to pin both bars while the Timeline's items scroll. Give the Timeline a constrained height in this mode so it owns its scrollbar.

Basic Sample

Properties

accessibleName

Description	Defines the accessible ARIA name of the component.
Type	string | undefined
Default	undefined
Since	1.2.0

growing

Description	Defines whether the Timeline will have growing capability either by pressing a "More" button, or via user scroll. In both cases a load-more event is fired. Available options: Button - Displays a button at the end of the Timeline, which when pressed triggers the load-more event. Scroll -Triggers the load-more event when the user scrolls to the end of the Timeline. None (default) - The growing functionality is off.
Type	"Button" | "None" | "Scroll" (value descriptions in: TimelineGrowingMode)
Default	"None"
Since	2.7.0

layout

Description	Defines the items orientation.
Type	"Horizontal" | "Vertical" (value descriptions in: TimelineLayout)
Default	"Vertical"
Since	1.0.0-rc.15

loading

Description	Defines if the component should display a loading indicator over the Timeline.
Type	boolean
Default	false
Since	2.7.0

loadingDelay

Description	Defines the delay in milliseconds, after which the loading indicator will show up for this component.
Type	number
Default	1000

stickyHeader

Description	Defines whether the content of the header and infoBar slots remains visible when the user scrolls the Timeline. Note: The bars pin to the Timeline's own scrollport. Give the Timeline a constrained height (for example style="height: 32rem") so its items scroll inside it. Placing the Timeline inside an externally scrolling ancestor while leaving the Timeline itself unsized is not supported in this mode — the bars will scroll away with the ancestor.
Type	boolean
Default	false
Since	2.22.0

Slots

default

Description	Determines the content of the ui5-timeline.
Type	Array<ITimelineItem>

header

Description	Defines the content of the Timeline's header area, displayed above the items. Typically a ui5-toolbar with search, sort, and filter controls.
Type	Array<HTMLElement>
Since	2.22.0

infoBar

Description	Defines the content of the Timeline's info bar area, displayed below the header and above the items. Use for status display (applied filters, sort direction, counts).
Type	Array<HTMLElement>
Since	2.22.0

Events

load-more

Description	Fired when the user presses the More button or scrolls to the Timeline's end. Note: The event will be fired if growing is set to Button or Scroll.
Type	CustomEvent
Since	2.7.0
Bubbles	Yes
Cancelable	No

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

CSS Custom States

No CSS custom states available for this component.

More Samples

Horizontal layout

Timeline with State

Timeline in Card

Timeline with Groups

Timeline with Growing

Timeline with Header and Info Bar

The header and infoBar slots let applications place their own controls and status indicators above the Timeline items.

• header — controls (search, sort, filter). Use a ui5-toolbar.
• infoBar — status display (active filters, item count). Use a ui5-bar with design="Subheader".
• Use stickyHeader to pin both bars while scrolling.

The Timeline does not filter, sort, or search — the application owns that logic and updates items accordingly.

Minimal — search and live count

Full pipeline — search, sort and filter

Sticky in a scrollable Timeline

When the Timeline owns its scrollbar (give it a constrained height), stickyHeader keeps the header and infoBar slots pinned to the top while the items scroll.