You can use the Menu as a navigational component by wiring it with any router library.

  1. Set the data property of each Menu item to the corresponding route path.
  2. Upon the selection of a Menu item, read the route path from the data property and push it to props.history.
  3. The component that is passed through props.children corresponds to the new route path.
import React from 'react';
import { withRouter } from 'react-router-dom';
import { Menu, MenuItem } from '@progress/kendo-react-layout';

class MenuNavContainer extends React.Component {
    render() {
        return (
                <Menu onSelect={this.onSelect}>
                    <MenuItem text="Home" data={{ route: '/' }} />
                    <MenuItem text="Products" data={{ route: '/products' }} />
                    <MenuItem text="About" data={{ route: '/about' }}>
                        <MenuItem text="Team" data={{ route: '/about/team' }} />
                <div style={{ padding: 10 }}>{this.props.children}</div>

    onSelect = (event) => {

export default withRouter(MenuNavContainer);