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);
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Switch, HashRouter } from 'react-router-dom';
import MenuNavContainer from './MenuNavContainer.jsx';
import About from './About.jsx';
import Team from './Team.jsx';
import Home from './Home.jsx';
import Products from './Products.jsx';

ReactDOM.render(
    <HashRouter >
        <MenuNavContainer>
            <Switch>
                <Route exact={true} path="/" component={Home} />
                <Route exact={true} path="/products" component={Products} />
                <Route exact={true} path="/about" component={About} />
                <Route exact={true} path="/about/team" component={Team} />
            </Switch>
        </MenuNavContainer>
    </HashRouter >,
    document.querySelector('my-app')
);
import * as React from 'react';

export default class About extends React.Component {
    render() {
        return (
            <div>
                <h2>About</h2>
                <div>
                    <p>
                        So cuffed therefore by some sadistically mallard rewrote yet accommodatingly more
                        cat adequate pesky far this dear fitting and groundhog horse some selfish jeepers juggled
                        about since upheld heatedly well much.
                    </p>
                    <p>
                        Therefore falcon usefully crab during onto hello regally rat wiped misread reluctant unlike
                        iguanodon fish far bald abjectly far chameleon more scurrilous gagged virtuously sufficient
                        arrogant cobra froze dog waywardly staunch thus consoled.
                    </p>
                    <p>
                        Amphibious darn well densely far meanly inanimately incoherent away flamingo outside yet jeez
                        that yawned secret evasive dear overrode rat cow one overpaid far hatchet much.
                    </p>
                    <p>
                        Had aerial well well coasted darn chuckled studied underlay fatally the but among because
                        patient or shook depending much sloth wetted cheered some bee.
                    </p>
                    <p>
                        Bombastically yikes some coquettish erroneously in therefore disgracefully glanced some
                        connected and goodness more read marvelous up one rebukingly darn fuzzily.
                    </p>
                    <p>
                        Meadowlark and hence regarding flaunting amongst steadfastly demurely like far and stiffly
                        bled reluctant alongside jeez this save opposite well and this shuddered and smoked wherever
                        condescendingly hey onto much.
                    </p>
                    <p>
                        Hello gosh gosh up effortlessly valiant hotly less rubbed gerbil and ouch inside fatuous
                        suitably far fuzzily unihibitedly locked froze timidly hello much revealed lorikeet lantern
                        this much one and far decidedly.
                    </p>
                </div>
            </div>
        );
    }
}
import * as React from 'react';

export default class Products extends React.Component {
    render() {
        return (
            <div>
                <h2>Products</h2>
                <div>
                    <p>
                        Inclusive and foolishly more on yikes far one vociferous squinted lied much the howled disagreed
                        yet seal needlessly vulgarly far moistly wanton.
                    </p>
                    <p>
                        Human and some barring roadrunner behind swore hello ebulliently pending less upon amiable less
                        amiably dear harsh telepathic regarding hey poignant ahead.
                    </p>
                    <p>
                        Immensely a that gosh accurately by naughtily patted laxly far pangolin ouch this like marvelous
                        bitter crab jeez after unobtrusive flamboyant octopus.
                    </p>
                    <p>
                        So koala that ouch and much porpoise falcon from and wasp curtly crud much more frequently and
                        accidental beneath during far.
                    </p>
                </div>
            </div>
        );
    }
}
import * as React from 'react';

export default class Home extends React.Component {
    render() {
        return (
            <div>
                <h2>Home page</h2>
                <div>
                    <p>
                        However engaging wherever growled much methodic shamefully more human agreeable gracefully and
                        less equitable insistent gasped that when wasp baboon rebuilt more slept stingily along knew llama.
                    </p>
                    <p>
                        Prim crud far healthy wholesomely more far chortled ouch in adroitly gawked affably reasonably
                        manfully reindeer mysteriously overpaid considering far far until.
                    </p>
                    <p>
                        Red-handed off thickly save aboard mawkishly that amidst moth pending jerkily monogamous some much
                        or creatively indecent neat far jeepers up spoiled about.
                    </p>
                    <p>
                        Owing desperate like one shark or bit yikes up so thus grumbled gosh more bawled much and regardless
                        hey far bought through crud well staunchly hysteric inside incorrect the closed.
                    </p>
                    <p>
                        Industrious jubilant blanched bestially yet that less far far a wow the militant preparatory
                        crudely acrimonious under a towards lemur wedded that while decorously this peered darn a much.
                    </p>
                    <p>
                        Dizzy boundless hence but because moodily and alas a truculently less hardheaded so on ambiguously
                        incompetently less moaned hilarious until one jeepers amid heinously.
                    </p>
                    <p>
                        Where beneath less misspelled across artistically spiteful jeepers much more that when blushed a
                        much a this groundhog therefore far arduous dependent much satanic where dear goodness hummingbird.
                    </p>
                </div>
            </div>
        );
    }
}
import * as React from 'react';

export default class Team extends React.Component {
    render() {
        return (
            <div>
                <h3>Team</h3>
                <div>
                    <p>
                        Leapt sprang volubly that or adroitly cozy sold creepy shuffled spent flirted withdrew gosh zebra
                        prideful swung yawned monkey penguin.
                    </p>
                    <p>
                        This wow flinched one immoral this dear far inflexible newt far outside up hey excluding goodness
                        hello much after feverishly direly fitted wow some youthful crud stark more strict unjustifiable
                        that told one.
                    </p>
                    <p>
                        Shark audible mistook removed tryingly much delicate yet sudden after contrary thus brusque more
                        won wallaby frowningly much censorious spryly thanks circuitous this sewed dreamed wow.
                    </p>
                    <p>
                        The against alas less adoringly some cutting aboard lighted some dear agilely and enticingly before
                        thanks upon was neglectful merrily some porpoise tenably and and groundhog together kiwi much barked
                        miser.
                    </p>
                    <p>
                        Much flamingo mocking much far far some since among ritually since crud near one tartly left far and
                        far this ineffectively goodness mighty some and intricately far.
                    </p>
                    <p>
                        Modestly mastodon hypocritically hatchet gerbil successful dispassionate nefariously and
                        the dangerously far in one less save gosh became and sparing that by alas.
                    </p>
                </div>
            </div>
        );
    }
}

In this article