Orientation

To set the orientation of the Stepper, use the orientation option.

By default, the orientation is set to horizontal.

@Component({
    selector: 'my-app',
    template: `
        <div style='display: grid; grid-template-columns: 150px auto'>
            <kendo-stepper
                [style.width.px]="150"
                [steps]="steps"
                [stepType]="'full'"
                [orientation]="'vertical'">
            </kendo-stepper>
            <kendo-stepper
                [style.width.px]="350"
                [steps]="steps"
                [stepType]="'full'"
                [orientation]="'horizontal'">
            </kendo-stepper>
        </div>
    `
})
class AppComponent {
    public steps = [
        { label: 'Account Info', icon: 'lock' },
        { label: 'Personal Info', icon: 'user' },
        { label: 'Payment Details', icon: 'cart', disabled: 'true' }
    ];
}

In this article