Components / React / Layout / Menu
All components

Menu Overview

The 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.

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')
);

[{
    "text": "Item1",
    "items": [{ "text": "Item1.1" }, { "text": "Item1.2", "items": [{ "text": "Item1.2.1" }, { "text": "Item1.2.2" }] }]
}, {
    "text": "Item2",
    "items": [{ "text": "Item2.1" }, { "text": "Item2.2" }, { "text": "Item2.3" }]
}, {
    "text": "Item3"
}]

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')
);

In this article