# Timeline

**Path:** Components/Data Display

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

Timeline

 RbTimeline component displays a list of events in chronological order. It can be used to show a timeline of activities, history, or progress through specific steps.

 Basic Usage

 A simple vertical timeline showing chronological events with dots and content.

 Show code

 Disable 

 Vertical Timeline

 Timeline displayed vertically with alternating content on both sides.

 Show code

 Horizontal Timeline

 Timeline displayed horizontally, useful for showing progress or steps in a process.

 Show code

 Order Processing Steps

 Position Alignment

 Control the alignment of content using Position parameter (Start, Center, End).

 Show code

 Position: Start

 Position: Center (Alternating)

 Position: End

 Custom Dots & Colors

 Customize the appearance of timeline dots with icons, colors, and sizes.

 Show code

 Snake Timeline

 An explicit Snake mode with curved CSS connectors for multi-row timelines.
 Snake layout uses table-based row alignment so content growth does not overlap dots/connectors.
 Use SnakeCol for fixed columns, or set SnakeColMax (+ optional SnakeColMinWidth ) for responsive columns.
 Responsive snake mode uses an implicit minimum of 1 column.
 Responsive mode is opt-in and, when enabled, it overrides SnakeCol . Snake mode never auto-activates from horizontal overflow.

 Show code

 Snake Layout 

 Responsive Columns 

 Disabled 

 Snake mode is explicit and controlled by Snake . Snake rendering uses table-based row alignment to keep content, dots, and connectors in separate lanes.
 Responsive columns are also explicit: set SnakeColMax (minimum is always 1 ) to opt in. When responsive mode is active, measured column count overrides SnakeCol .

 RTL Support

 Show timeline steps inside a local RTL container with Arabic content and mixed reference numbers.

 Show code

 مخطط عمودي

 مخطط Snake

 يوضح هذا المثال نفس الفكرة داخل حاوية RTL مع توزيع متعدد الأعمدة.

 ✕

 Contents