Stepper Orientation

Updated on Jul 15, 2026

You can customize the stepper orientation through the Orientation parameter the TelerikStepper exposes. It takes a member of the Telerik.Blazor.Enums.StepperOrientation enum:

• Horizontal (the default)
• Vertical

Horizontal Stepper

Since horizontal is the default value for the Stepper Orientation parameter, you don't need to explicitly define it.

Horizontal Stepper. The result from the snippet below.

Example

View Source

@* Stepper with horizontal orientation *@

<div style="width:500px">
    <TelerikStepper>
        <StepperSteps>
            <StepperStep Text="1" Label="Step 1"></StepperStep>
            <StepperStep Text="2" Label="Step 2"></StepperStep>
            <StepperStep Text="3" Label="Step 3"></StepperStep>
        </StepperSteps>
    </TelerikStepper>
</div>

Vertical Stepper

Set the Orientation parameter of the Stepper to vertical to change its default orientation.

Vertical Stepper. The result from the snippet below.

Example

View Source

@* Stepper with vertical orientation *@

<TelerikStepper Orientation="StepperOrientation.Vertical">
    <StepperSteps>
        <StepperStep Text="1" Label="Step 1"></StepperStep>
        <StepperStep Text="2" Label="Step 2"></StepperStep>
        <StepperStep Text="3" Label="Step 3"></StepperStep>
    </StepperSteps>
</TelerikStepper>

See Also

• Live Demo: Stepper Overview
• Live Demo: Stepper Configuration