Orientation

To set the Stepper orientation, use the orientation property.

By default, orientation is set to horizontal.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { Stepper } from '@progress/kendo-react-layout';
import { DropDownList } from '@progress/kendo-react-dropdowns';

const items = [
    { icon: 'k-i-lock', label: 'Account Info' },
    { icon: 'k-i-user', label: 'Personal Info' },
    { icon: 'k-i-myspace', label: 'Membership' },
    { icon: 'k-i-track-changes', label: 'Verification' }
];

const App = () => {
    const [value, setValue] = React.useState(1);
    const [orientation, setOrientation] = React.useState('horizontal');

    const handleChange = (e) => {
        setValue(e.value);
    };

    const handleOrientationChange = (e) => {
        setOrientation(e.target.value);
    }

    return (
        <React.Fragment>
            <p>Change the orientation:</p>
            <DropDownList
                data={['horizontal', 'vertical']}
                value={orientation}
                onChange={handleOrientationChange}
            />
            <hr />
            <Stepper value={value} onChange={handleChange} items={items} orientation={orientation} />
        </React.Fragment>
    );
};

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);