RadzenTimeline Class

A timeline component for displaying chronological sequences of events with visual indicators and connecting lines. RadzenTimeline presents events along a vertical or horizontal axis, ideal for histories, project milestones, or process flows. Visualizes temporal data in a linear sequence with customizable markers, labels, and content for each event. Supports Vertical (top-to-bottom) or Horizontal (left-to-right) orientation, Center/Start/End/Alternate positioning of the connecting line, custom point markers/labels/content per item via templates, content alignment control (start, center, end, stretch), chronological order reversal, and flexible content where each item can have point marker, label, and main content. Timeline items are defined using RadzenTimelineItem components. Common uses include order tracking, project progress, changelog displays, or activity feeds.

Inheritance

Object

ComponentBase

RadzenComponent

RadzenTimeline

Implements

IComponent

IHandleEvent

IHandleAfterRender

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenTimeline : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender

Examples

Basic vertical timeline:

<RadzenTimeline>
    <Items>
        <RadzenTimelineItem>
            <PointContent><RadzenIcon Icon="check_circle" /></PointContent>
            <ChildContent>
                <RadzenText TextStyle="TextStyle.H6">Order Placed</RadzenText>
                <RadzenText>January 1, 2026</RadzenText>
            </ChildContent>
        </RadzenTimelineItem>
        <RadzenTimelineItem>
            <PointContent><RadzenIcon Icon="local_shipping" /></PointContent>
            <ChildContent>
                <RadzenText TextStyle="TextStyle.H6">Shipped</RadzenText>
                <RadzenText>January 2, 2026</RadzenText>
            </ChildContent>
        </RadzenTimelineItem>
    </Items>
</RadzenTimeline>

Horizontal timeline with labels:

<RadzenTimeline Orientation="Orientation.Horizontal" LinePosition="LinePosition.Bottom">
    <Items>
        <RadzenTimelineItem>
            <LabelContent>2020</LabelContent>
            <ChildContent>Company founded</ChildContent>
        </RadzenTimelineItem>
        <RadzenTimelineItem>
            <LabelContent>2022</LabelContent>
            <ChildContent>First product launch</ChildContent>
        </RadzenTimelineItem>
    </Items>
</RadzenTimeline>

Constructors

RadzenTimelinelink

A timeline component for displaying chronological sequences of events with visual indicators and connecting lines. RadzenTimeline presents events along a vertical or horizontal axis, ideal for histories, project milestones, or process flows. Visualizes temporal data in a linear sequence with customizable markers, labels, and content for each event. Supports Vertical (top-to-bottom) or Horizontal (left-to-right) orientation, Center/Start/End/Alternate positioning of the connecting line, custom point markers/labels/content per item via templates, content alignment control (start, center, end, stretch), chronological order reversal, and flexible content where each item can have point marker, label, and main content. Timeline items are defined using RadzenTimelineItem components. Common uses include order tracking, project progress, changelog displays, or activity feeds.

Declaration
public RadzenTimeline()

Properties

AlignItemslink

Gets or sets the cross-axis alignment of timeline item content (label, point, and child content). Controls vertical alignment for horizontal timelines, or horizontal alignment for vertical timelines.

Declaration
public AlignItems AlignItems { get; set; }
Property Value
Type Description
AlignItemsGets or sets the cross-axis alignment of timeline item content (label, point, and child content). Controls vertical alignment for horizontal timelines, or horizontal alignment for vertical timelines.

Itemslink

Gets or sets the render fragment containing RadzenTimelineItem components that define the timeline events. Each RadzenTimelineItem represents one event or milestone in the timeline.

Declaration
public RenderFragment Items { get; set; }
Property Value
Type Description
RenderFragmentGets or sets the render fragment containing RadzenTimelineItem components that define the timeline events. Each RadzenTimelineItem represents one event or milestone in the timeline.

LinePositionlink

Gets or sets where the connecting line appears relative to the timeline items. Options include Center (line between content), Start/End (line on side), or Alternate (zigzag pattern).

Declaration
public LinePosition LinePosition { get; set; }
Property Value
Type Description
LinePositionGets or sets where the connecting line appears relative to the timeline items. Options include Center (line between content), Start/End (line on side), or Alternate (zigzag pattern).

Orientationlink

Gets or sets the layout direction of the timeline. Vertical displays events top-to-bottom, Horizontal displays events left-to-right.

Declaration
public Orientation Orientation { get; set; }
Property Value
Type Description
OrientationGets or sets the layout direction of the timeline. Vertical displays events top-to-bottom, Horizontal displays events left-to-right.

Reverselink

Gets or sets whether to reverse the timeline order visually (but not in markup). When true with vertical orientation, items flow bottom-to-top. With horizontal, items flow right-to-left.

Declaration
public bool Reverse { get; set; }
Property Value
Type Description
boolGets or sets whether to reverse the timeline order visually (but not in markup). When true with vertical orientation, items flow bottom-to-top. With horizontal, items flow right-to-left.

Methods

BuildRenderTreelink

Declaration
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)
Parameters
Type Name Description
Rendering.RenderTreeBuilder __builder

GetComponentCssClasslink

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string
An error has occurred. This app may no longer respond until reloaded. Reload 🗙