Layout / Menu / Getting Started
material theme

Getting Started with KendoReact Menu

The KendoReact Menu is a multi-level component for displaying hierarchical data.

You can describe the Menu items either:

  • By using nested MenuItem components, or
  • By setting the items property.

The Menu component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-layout package.

Basic Usage

The following example demonstrates the Menu in action.

import React from 'react';
import ReactDOM from 'react-dom';
import { Menu } from '@progress/kendo-react-layout';
import items from './items.json';

class App extends React.Component {
    render() {
        return (
            <div>
                <Menu items={items} />
            </div>
        );
    }
}

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

Functionality and Features

Events

The following example demonstrates the select event of the Menu.

class App extends React.Component {
        constructor(props) {
            super(props);

            this.state = { logs: [] };
        }

        render() {
            return (
                <div className="row">
                    <div className="col-md-6">
                        <Menu onSelect={this.handleSelect}>
                            <MenuItem text="First item">
                                <MenuItem text="Child item"/>
                            </MenuItem>
                            <MenuItem text="Second item"/>
                        </Menu>
                    </div>
                    <div className="example-config col-md-6" style={{ height: '180px' }}>
                        <h5>Log: </h5>
                        <ul className="event-log">
                            {this.renderLogs()}
                        </ul>
                    </div>
                </div>
            );
        }

        renderLogs = () => {
            return this.state.logs.map((log, index) => {
                return <li key={index}>{log}</li>;
            });
        }

        handleSelect = (e) => {
            const logs = this.state.logs.slice();
            logs.unshift(`id: ${e.itemId} text: ${e.item.text}`);

            this.setState({ logs });
        }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /