Vertical Menu

To render the Menu vertically, set its vertical property to true.

import React from 'react';
import ReactDOM from 'react-dom';
import { Menu, MenuItem } from '@progress/kendo-react-layout';

class App extends React.Component {
    render() {
        return (
            <Menu vertical={true} style={{ display: 'inline-block' }}>
                <MenuItem text="Item1">
                    <MenuItem text="Item1.1" />
                    <MenuItem text="Item1.2">
                        <MenuItem text="Item1.2.1" />
                        <MenuItem text="Item1.2.2" />
                    </MenuItem>
                </MenuItem>
                <MenuItem text="Item2">
                    <MenuItem text="Item2.1" />
                    <MenuItem text="Item2.2" />
                </MenuItem>
                <MenuItem text="Item3" />
            </Menu>
        );
    }
}

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

In this article