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.
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-bar 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.
Either slot can be made sticky using stickyHeader and stickyInfoBar. Sticky behavior
applies relative to the Timeline's internal scroll container by default, and relative
to the nearest ancestor scroll container when noScrollContainer is set.
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.
Defines whether the Timeline relinquishes its internal scroll container. By default the Timeline scrolls internally; sticky header and info bar stick to the top of the Timeline. When set to true, the Timeline does not clip or scroll its content — the application is expected to provide a scroll container on an ancestor element, and sticky slots will stick to that ancestor instead. Note: When the layout is Horizontal, items scroll horizontally inside the Timeline by default. Setting noScrollContainer in horizontal layout means the application must also provide horizontal scrolling on an ancestor; otherwise items will overflow without a scrollbar.
Defines the content of the Timeline's header area, displayed above the items. The most common use case is a controls bar with a search field, sort toggle, and a filter trigger. Typically a ui5-bar is placed in this slot. The Timeline itself does not filter, sort, or search — the application listens for events from its own controls and updates the items in the default slot accordingly.
Defines the content of the Timeline's info bar area, displayed below the header and above the items. Use this slot to surface state derived from the header controls — for example, a list of currently applied filters, the active sort direction, or the current search query.
The header slot accepts any content — typically a ui5-bar containing a search field and triggers
for sort and filter dialogs. The infoBar slot reflects the resulting state (active filters,
sort direction, current search query). Both slots can be made sticky via the stickyHeader and
stickyInfoBar properties. The Timeline itself does not filter, sort, or search — the
application owns that logic.