Routing

You can use the PanelBar as a navigational component with the React router.

Using Custom Properties to Set Route Paths

To use custom properties and set the route path:

  1. Apply the route custom property to the PanelBarItem.
  2. Set the property to the corresponding path.
  3. After the user makes a selection, identify the selected PanelBarItem by its route property and redirect the source.
import * as React from 'react';
import { PanelBar, PanelBarItem } from '@progress/kendo-react-layout';
import { withRouter } from 'react-router-dom';

class PanelBarNavContainer extends React.Component {
    onSelect = (event) => {
        this.props.history.push(event.target.props.route);
    }

    render() {
        return (
            <div style={{
                display: 'flex',
                width: '100%' }}
                >
                <div style={{
                    minWidth: '20%',
                    maxWidth: '20%' }}
                    >
                    <PanelBar expandMode={'single'} onSelect={this.onSelect}>
                        <PanelBarItem title={'Home'} route="/" />
                        <PanelBarItem title={'Products'} route="/products" />
                        <PanelBarItem title={'About'} route="/about">
                            <PanelBarItem title={'Team'} route="/about/team" />
                        </PanelBarItem>
                    </PanelBar>
                </div>
                <div style={{
                    paddingLeft: '10pt'
                }}>{this.props.children}</div>
            </div>
        );
    }
}

export default withRouter(PanelBarNavContainer);
 /