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