Routing

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

  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 (
            <div>
                <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' }} />
                    </MenuItem>
                </Menu>
                <div style={{ padding: 10 }}>{this.props.children}</div>
            </div>
        );
    }

    onSelect = (event) => {
        this.props.history.push(event.item.data.route);
    }
}

export default withRouter(MenuNavContainer);
In this article
 /