Introducing the New Blazor Timeline Component
Tags: blazor, development, web, ui
Published: 2024-04-17 03:00:24

---
title: Introducing the New Blazor Timeline Component
published: true
date: 2024-04-08 09:39:12 UTC
tags: blazor, development, web, ui
canonical_url: https://www.syncfusion.com/blogs/post/new-blazor-timeline-component
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2uap2yoe6vdhjgxxawhp.png
---

**TLDR:** Exploring the robust features of the new Syncfusion Blazor Timeline, highlighting its orientation, items alignment, and customization of displaying items using templates. 

We’re thrilled to introduce the new Syncfusion [Blazor Timeline](https://www.syncfusion.com/blazor-components/blazor-timeline "Blazor Timeline Component") component as part of our [Essential Studio 2024 Volume 1](https://www.syncfusion.com/forums/187257/essential-studio-2024-volume-1-main-release-v25-1-35-is-available-for-download "Essential Studio 2024 Volume 1") release.

The [Blazor Timeline](https://blazor.syncfusion.com/documentation/timeline/getting-started "Getting Started with Blazor Timeline Component") is a tool to display a series of data in chronological order, providing a visually compelling and user-friendly experience. This showcases user activities, tracking progress, narrating historical timelines, and more. It includes several built-in features, such as orientation, opposite content, item alignment, reverse timeline, and template customization.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Integrating-the-Timeline-Component-in-Blazor.png" alt="Integrating the Timeline Component in Blazor" style="width:100%">

  <figcaption>Integrating the Timeline Component in Blazor</figcaption>

</figure>

In this blog, we’ll explore the key features of the Blazor Timeline component.

## Use Cases

The Blazor Timeline component is well-suited for various applications:

- **Historical Events:** Showcase historical milestones or company achievements with a clear and organized display of events over different years.
- **Project Management:** Effortlessly track project milestones, deadlines, and achievements, providing teams with a visual representation of progress throughout the project lifecycle.
- **Order Tracking:** Guide users through the stages of an e-commerce application, from adding items to the cart to finalizing orders with clear and organized steps.

## Key Features

The key features of the Timeline component are as follows: 

- [Orientations](#Orientations)
- [Display Additional Information](#Display)
- [Items alignment](#Items)
- [Reverse Timeline](#Reverse)
- [Customization using Templates.](#Customization)

## <a name="Orientations">Orientations</a>

The Blazor Timeline component has two orientation modes:

- **Horizontal:** Displays items side-by-side.
- **Vertical:** Default orientation that displays items one below the other.

In the following code example, the [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfTimeline.html#Syncfusion_Blazor_Layouts_SfTimeline_Orientation "Orientation property for Blazor Timeline") property defines the layout options with possible values of [TimelineOrientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineOrientation.html "TimelineOrientation class for Blazor Timeline").

```csharp
@using Syncfusion.Blazor.Layouts
@using Syncfusion.Blazor.Buttons

<SfButton OnClick="ChangeOrientation">Change Orientation</SfButton>

<div class="timeline-component" style="height: 350px">
    <SfTimeline Orientation="@orientation">
        <TimelineItems>
            <TimelineItem>
                <Content>January 1, 2022</Content>
            </TimelineItem>
            <TimelineItem>
                <Content>April 5, 2023</Content>
            </TimelineItem>
            <TimelineItem>
                <Content>February 12, 2024</Content>
            </TimelineItem>
        </TimelineItems>
    </SfTimeline>
</div>

@code {
    private TimelineOrientation orientation = TimelineOrientation.Horizontal;

    private void ChangeOrientation()
    {
        orientation = orientation == TimelineOrientation.Horizontal ? TimelineOrientation.Vertical : TimelineOrientation.Horizontal;
    }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Orientations-options-in-Blazor-Timeline.gif" alt="Orientations options in Blazor Timeline" style="width:100%">

  <figcaption>Orientations options in Blazor Timeline</figcaption>

</figure>

**Note:** For more details, refer to [layout options in Blazor Timeline](https://blazor.syncfusion.com/documentation/timeline/orientations "Orientations in Blazor Timeline component") and [GitHub demos](https://blazor.syncfusion.com/demos/timeline/api?theme=fluent "API in Blazor Timeline Component live demo").

## <a name="Display">Display Additional Information</a>

Enhance each timeline item with supplementary information positioned alongside the main content. This additional information, placed opposite to the main content, enriches the context of every item, providing users with a comprehensive view of the timeline.

You can set the supplementary information for each item using the [OppositeContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineItem.html#Syncfusion_Blazor_Layouts_TimelineItem_OppositeContent "OppositeContent property for Blazor Timeline") property.

Refer to the following example.

```xml
@using Syncfusion.Blazor.Layouts

<div class="timeline-component" style="height: 350px">
 <SfTimeline>
  <TimelineItems>
   <TimelineItem>
    <Content>Order Recieved</Content>
    <OppositeContent>6:45 PM</OppositeContent>
   </TimelineItem>
   <TimelineItem>
    <Content>Preparing Order</Content>
    <OppositeContent>6:50 PM</OppositeContent>
   </TimelineItem>
   <TimelineItem>
    <Content>On The Way</Content>
    <OppositeContent>7:05 PM</OppositeContent>
   </TimelineItem>
   <TimelineItem>
    <Content>Delivered!</Content>
    <OppositeContent>7:15 PM</OppositeContent>
   </TimelineItem>
  </TimelineItems>
 </SfTimeline>
</div>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Display-Additional-Information-in-Blazor-Timeline.png" alt="Display Additional Information in Blazor Timeline" style="width:100%">

  <figcaption>Display Additional Information in Blazor Timeline</figcaption>

</figure>

**Note:** For more details, refer to [set additional information to each Timeline item documentation.](https://blazor.syncfusion.com/documentation/timeline/items#adding-opposite-content "Display additional information to each Timeline item documentation")

## <a name="Items">Items alignment</a>

The Blazor Timeline component supports aligning the items’ content and opposite content as follows:

- **Before:** Align the item content to the left (or top for horizontal orientation) and the opposite content to the right (or bottom).
- **After:** The default alignment aligns the item content to the right (or bottom for horizontal orientation) and the opposite content to the left (or top).
- **Alternate:** Align the content of the first item to the right and the opposite content to the left, and vice versa for subsequent items.
- **AlternateReverse:** Align the content of the first item to the left and the opposite content to the right, and vice versa for subsequent items.

In the following code example, the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfTimeline.html#Syncfusion_Blazor_Layouts_SfTimeline_Alignment "Alignment property for Blazor Timeline") property aligns the items’ content and opposite content with possible values specified by [TimelineAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineAlignment.html "TimelineAlignment class for Blazor Timeline").

```xml
@using Syncfusion.Blazor.Layouts

<div class="timeline-component" style="height: 350px">
    <SfTimeline Alignment="TimelineAlignment.Alternate">
        <TimelineItems>
            <TimelineItem>
                <Content>Order Recieved</Content>
                <OppositeContent>6:45 PM</OppositeContent>
            </TimelineItem>
            <TimelineItem>
                <Content>Preparing Order</Content>
                <OppositeContent>6:50 PM</OppositeContent>
            </TimelineItem>
            <TimelineItem>
                <Content>On The Way</Content>
                <OppositeContent>7:05 PM</OppositeContent>
            </TimelineItem>
            <TimelineItem>
                <Content>Delivered!</Content>
                <OppositeContent>7:15 PM</OppositeContent>
            </TimelineItem>
        </TimelineItems>
    </SfTimeline>
</div>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Items-alignment-in-Blazor-Timeline.gif" alt="Items alignment in Blazor Timeline" style="width:100%">

  <figcaption>Items alignment in Blazor Timeline</figcaption>

</figure>

**Note:** For more details, refer to [aligning the items’ content and opposite content documentation](https://blazor.syncfusion.com/documentation/timeline/align "Alignment in Blazor Timeline component") and the [GitHub live demo](https://blazor.syncfusion.com/demos/timeline/api?theme=fluent "API in Blazor Timeline Component live demo").

## <a name="Reverse">Reverse Timeline</a>

The Blazor Timeline component offers the option to present timeline items in reverse order, providing a unique perspective and enhancing user engagement. This feature allows users to focus on the most recent events first, improving the overall usability of the timeline.

You can specify whether to display the Timeline items in reverse order using the [Reverse](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfTimeline.html#Syncfusion_Blazor_Layouts_SfTimeline_Reverse "Reverse property for Blazor Timeline") property.

Refer to the following code example.

```xml
@using Syncfusion.Blazor.Layouts
@using Syncfusion.Blazor.Buttons

<SfButton OnClick="UpdateTimeline">Change to Reverse</SfButton>

<div class="timeline-component" style="height: 350px">
    <SfTimeline Reverse="@isReverseTimeline" CssClass="custom-timeline">
        <TimelineItems>
            <TimelineItem DotCss="completed-state" CssClass="connector-success">
                <Content>Order</Content>
            </TimelineItem>
            <TimelineItem DotCss="in-progress-state" CssClass=@(isReverseTimeline ? "connector-success" : "")>
                <Content>Shipped</Content>
            </TimelineItem>
            <TimelineItem>
                <Content>Out for delivery</Content>
            </TimelineItem>
            <TimelineItem>
                <Content>Delivered</Content>
            </TimelineItem>
        </TimelineItems>
    </SfTimeline>
</div>

@code {
    private bool isReverseTimeline { get; set; } = false;

    private void UpdateTimeline()
    {
        isReverseTimeline = !isReverseTimeline;
    }
}

<style>

    .custom-timeline .in-progress-state {
        background-color: #0078D6;
        --dot-size: 24px;
        --dot-border: 3px;
    }

    .custom-timeline .completed-state {
        background-color: #4CAF50;
    }

    .custom-timeline .e-timeline-item.e-connector.connector-success::after {
        border-color: #4CAF50;
        border-style: solid;
    }

    .custom-timeline .e-timeline-item.e-connector::after {
        border-style: dashed;
    }
</style>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Reverse-Timeline-in-Blazor-Timeline.gif" alt="Reverse Timeline in Blazor Timeline" style="width:100%">

  <figcaption>Reverse Timeline in Blazor Timeline</figcaption>

</figure>

**Note:** For more details, refer to [reversing the order of timeline items documentation](https://blazor.syncfusion.com/documentation/timeline/reverse "Reverse in Blazor Timeline component").

## <a name="Customization">Customization using Templates</a>

With the Blazor Timeline component, you can easily customize its appearance, including styling dot items and templating content. This feature provides a high level of flexibility and control over the timeline’s presentation, ensuring it matches your application’s design perfectly.

The following code example demonstrates the project management phases using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfTimeline.html#Syncfusion_Blazor_Layouts_SfTimeline_Template "Template property for Blazor Timeline") property for customizing each item and its styling.

```xml
@using Syncfusion.Blazor.Layouts

<div class="timeline-component" style="height: 350px">
    <SfTimeline>
        <ChildContent>
            <TimelineItems>
                <TimelineItem>
                    <Content>Phase 1</Content>
                </TimelineItem>
                <TimelineItem>
                    <Content>Phase 2</Content>
                </TimelineItem>
                <TimelineItem>
                    <Content>Phase 3</Content>
                </TimelineItem>
            </TimelineItems>
        </ChildContent>
        <Template>
            <div class="custom-content">
                <label>@context.Item.Content(context)</label>
                @if (context.ItemIndex != 2)
                {
                    <span>↓</span>
                }
            </div>
            <div class="details">
                <div></div>
                <div class="description">
                    @if (context.ItemIndex == 0)
                    {
                        <b>Initiation & Planning</b>
                        <ol>
                            <li>Objectives, scope</li>
                            <li>Feasibility study</li>
                            <li>Project charter</li>
                        </ol>
                    }
                    else if (context.ItemIndex == 1)
                    {
                        <p><b>Execution & Monitoring</b></p>
                        <ol>
                            <li>Planning</li>
                            <li>Assign tasks, resources</li>
                            <li>Conduct team meetings</li>
                        </ol>
                    }
                    else
                    {
                        <p><b>Closure & Evaluation</b></p>
                        <ol>
                            <li>Project review</li>
                            <li>Documentation</li>
                            <li>Project closure</li>
                        </ol>
                    }
                </div>
            </div>
        </Template>
    </SfTimeline>
</div>

<style>
    .custom-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .custom-content label {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        border: 8px solid transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        font-style: italic;
        font-weight: bold;
        background-color: green;
        color: white;
    }

    .details {
        display: flex;
        align-items: center;
    }

    .details div {
        width: 80px;
        border: 1px dashed grey;
        height: 0px;
        margin: 0 5px;
    }

    .details .description {
        height: 100%;
        border: 1px solid grey;
        width: 170px;
        display: flex;
        border-radius: 5px;
        text-align: center;
        flex-direction: column;
        padding: 5px;
        align-items: flex-start;
    }

    .details .description ol {
        padding-left: 25px;
        text-align: left;
    }

    .details .description p {
        margin: 0;
    }

    .custom-content span {
        font-size: 60px;
        line-height: 60px;
        font-family: ui-monospace;
        height: 70px;
    }

</style>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Customization-Templates-in-Blazor-Timeline.png" alt="Customization Templates in Blazor Timeline" style="width:100%">

  <figcaption>Customization Templates in Blazor Timeline</figcaption>

</figure>

**Note:** For more details, refer to the [customizing the display of items using templates in the Blazor Timeline documentation](https://blazor.syncfusion.com/documentation/timeline/template "Default Functionalities in Blazor Timeline Component").

## References

For more details, refer to our complete [Blazor Timeline component demos](https://blazor.syncfusion.com/demos/timeline/default-functionalities?theme=fluent "Default Functionalities in Blazor Timeline Component live demo") and [documentation](https://blazor.syncfusion.com/documentation/timeline/getting-started "Getting Started with Blazor Timeline Component").

## Supported Platforms

The Timeline component is also available on the following platforms. 
<table style="width: 720px;" width="601">
<tbody>
<tr>
<td style="width: 238px;" width="199">
<p><strong>Platform&nbsp;</strong></p>
</td>
<td style="width: 240px;" width="200">
<p><strong>Live Demo&nbsp;</strong></p>
</td>
<td style="width: 242px;" width="202">
<p><strong>Documentation&nbsp;</strong></p>
</td>
</tr>
<tr>
<td style="width: 238px;" width="199">
<p><a title="JavaScript Timeline Control" href="https://www.syncfusion.com/javascript-ui-controls/js-timeline" target="_blank" rel="noopener">JavaScript</a></p>
</td>
<td style="width: 240px;" width="200">
<p><a title="JavaScript Timeline live demos" href="https://ej2.syncfusion.com/demos/#/material3/timeline/default" target="_blank" rel="noopener">JavaScript Timeline Demos&nbsp;</a></p>
</td>
<td style="width: 242px;" width="202">
<p><a title="Getting Started with JavaScript Timeline" href="https://ej2.syncfusion.com/documentation/timeline/getting-started" target="_blank" rel="noopener">Getting Started with JavaScript Timeline</a></p>
</td>
</tr>
<tr>
<td style="width: 238px;" width="199">
<p><a title="Angular Timeline Control" href="https://www.syncfusion.com/angular-components/angular-timeline" target="_blank" rel="noopener">Angular</a></p>
</td>
<td style="width: 240px;" width="200">
<p><a title="Angular Timeline live demos" href="https://ej2.syncfusion.com/angular/demos/#/material3/timeline/default" target="_blank" rel="noopener">Angular Timeline Demos&nbsp;</a></p>
</td>
<td style="width: 242px;" width="202">
<p><a title="Getting Started with Angular Timeline" href="https://ej2.syncfusion.com/angular/documentation/timeline/getting-started" target="_blank" rel="noopener">Getting Started with Angular Timeline</a></p>
</td>
</tr>
<tr>
<td style="width: 238px;" width="199">
<p><a title="React Timeline Component" href="https://www.syncfusion.com/react-components/react-timeline" target="_blank" rel="noopener">React</a></p>
</td>
<td style="width: 240px;" width="200">
<p><a title="React Timeline live demos" href="https://ej2.syncfusion.com/react/demos/#/material3/timeline/default" target="_blank" rel="noopener">React Timeline Demos</a></p>
</td>
<td style="width: 242px;" width="202">
<p><a title="Getting Started with React Timeline" href="https://ej2.syncfusion.com/react/documentation/timeline/getting-started" target="_blank" rel="noopener">Getting Started with React Timeline</a></p>
</td>
</tr>
<tr>
<td style="width: 238px;" width="199">
<p><a title="Vue Timeline Control" href="https://www.syncfusion.com/vue-components/vue-timeline" target="_blank" rel="noopener">Vue</a></p>
</td>
<td style="width: 240px;" width="200">
<p><a title="Vue Timeline live demos" href="https://ej2.syncfusion.com/vue/demos/#/material3/timeline/default" target="_blank" rel="noopener">Vue Timeline Demos</a></p>
</td>
<td style="width: 242px;" width="202">
<p><a title="Getting Started with Vue Timeline" href="https://ej2.syncfusion.com/vue/documentation/timeline/getting-started" target="_blank" rel="noopener">Getting Started with Vue Timeline</a></p>
</td>
</tr>
<tr>
<td style="width: 238px;" width="199">
<p><a title="ASP.Net Core Timeline Control" href="https://www.syncfusion.com/aspnet-core-ui-controls/timeline" target="_blank" rel="noopener">ASP.Net Core</a></p>
</td>
<td style="width: 240px;" width="200">
<p><a title="ASP.Net Core Timeline live demos" href="https://ej2.syncfusion.com/aspnetcore/Timeline/Default#/material3" target="_blank" rel="noopener">ASP.Net Core Timeline Demos&nbsp;</a></p>
</td>
<td style="width: 242px;" width="202">
<p><a title="Getting Started with ASP.Net Core Timeline" href="https://ej2.syncfusion.com/aspnetcore/documentation/timeline/getting-started" target="_blank" rel="noopener">Getting Started with ASP.Net Core Timeline</a></p>
</td>
</tr>
<tr>
<td style="width: 238px;" width="199">
<p><a title="ASP.Net MVC Timeline Control" href="https://www.syncfusion.com/aspnet-mvc-ui-controls/timeline" target="_blank" rel="noopener">ASP.Net MVC</a></p>
</td>
<td style="width: 240px;" width="200">
<p><a title="ASP.Net MVC Timeline live demos" href="https://ej2.syncfusion.com/aspnetmvc/Timeline/Default#/material3" target="_blank" rel="noopener">ASP.Net MVC Timeline Demos&nbsp;</a></p>
</td>
<td style="width: 242px;" width="202">
<p><a title="Getting Started with ASP.Net MVC Timeline" href="https://ej2.syncfusion.com/aspnetmvc/documentation/timeline/getting-started" target="_blank" rel="noopener">Getting Started with ASP.Net MVC Timeline</a></p>
</td>
</tr>
</tbody>
</table>

## Conclusion

Thanks for reading! In this blog, we have seen the features of the new Syncfusion [Blazor Timeline](https://www.syncfusion.com/blazor-components/blazor-timeline "Blazor Timeline Component") component that rolled out in our [2024 Volume 1](https://www.syncfusion.com/forums/187257/essential-studio-2024-volume-1-main-release-v25-1-35-is-available-for-download "Essential Studio 2024 Volume 1") release. These features are also listed on our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v25.1.35 "Essential Studio Release Notes") and the [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New") pages. Try out the component and share your feedback as comments on this blog.

You can also reach us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forums"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). Our team is always ready to assist you!

## Related blogs

- [Effortless Remote Debugging with Dev Tunnel in Visual Studio 2022](https://www.syncfusion.com/blogs/post/dev-tunnel-remote-debug-vs-2022 "Blog: Effortless Remote Debugging with Dev Tunnel in Visual Studio 2022")
- [What’s New in Syncfusion Blazor: 2024 Volume 1](https://www.syncfusion.com/blogs/post/whats-new-blazor-2024-vol-1 "Blog: What’s New in Syncfusion Blazor: 2024 Volume 1")
- [Create Responsive Web Designs Like a Pro with Blazor Media Query](https://www.syncfusion.com/blogs/post/responsive-web-blazor-mediaquery "Blog: Create Responsive Web Designs Like a Pro with Blazor Media Query")
- [Perform Effortless CRUD Actions in Blazor DataGrid with Fluxor](https://www.syncfusion.com/blogs/post/crud-blazor-datagrid-fluxor "Blog: Perform Effortless CRUD Actions in Blazor DataGrid with Fluxor")