All Components

You are on the site of the Kendo UI Wrappers for React suite which contains wrappers for the Kendo UI for jQuery widgets. To explore the brand-new set of Kendo UI for React components which are built from the ground up, go to the Kendo UI for React suite.

Menu Overview

The Menu displays hierarchical data as a multi-level menu.

It provides rich styling for unordered lists of items and can be used for both navigation and JavaScript commands.

The Menu wrapper for React is a client-side wrapper for the Kendo UI Menu widget.

Basic Usage

The following example demonstrates the Menu in action.

class MenuContainer extends React.Component {           
render() {
    return (
        <div id="example">  
            <h6> Menu </h6>
            <br/>
            <Menu>
                <MenuItem>Item 1</MenuItem>
                <MenuItem>Item 2</MenuItem>
                <MenuItem>
                    Item 3
                    <SubMenu>
                        <MenuItem>Item 3 1</MenuItem>
                        <MenuItem>
                            Item 3 2
                            <SubMenu>
                                <MenuItem>Item 3 2 1</MenuItem>
                                <MenuItem>Item 3 2 2</MenuItem>
                            </SubMenu>
                        </MenuItem>
                    </SubMenu>
                </MenuItem>
            </Menu>            
             <br/>
             <h6> ContextMenu </h6>
             <br/>
            <div id="target">Right-click me!</div>
            <ContextMenu target="#target" alignToAnchor={true}>
                <MenuItem>
                    Item 1
                    <SubMenu>
                        <MenuItem>Sub Item 1</MenuItem>
                        <MenuItem>Sub Item 2</MenuItem>
                        <MenuItem>Sub Item 3</MenuItem>
                    </SubMenu>
                </MenuItem>
                <MenuItem>
                    Item 2
                    <SubMenu>
                        <MenuItem>Sub Item 1</MenuItem>
                        <MenuItem>Sub Item 2</MenuItem>
                        <MenuItem>Sub Item 3</MenuItem>
                    </SubMenu>
                </MenuItem>
            </ContextMenu>
        </div>
    );
  }
}   

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

Features and Functionalities

Events

The following example demonstrates basic Menu events. You can subscribe to all Menu events by the handler name.

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

        this.onActivate = this.onActivate.bind(this);
        this.onDeactivate = this.onDeactivate.bind(this);
        this.onOpen = this.onOpen.bind(this);
        this.onClose = this.onClose.bind(this);
        this.onSelect = this.onSelect.bind(this);
    }

    onActivate = (e) => {
         console.log("Activated: " + ($(e.item).children(".k-link").text() || "ContextMenu"));
    }

    onDeactivate = (e) => {
        console.log("Deactivated: " + ($(e.item).children(".k-link").text() || "ContextMenu"));
    }

    onOpen = (e) => {
        console.log("Opened: " + ($(e.item).children(".k-link").text() || "ContextMenu"));
    }

    onClose = (e) => {
        console.log("Closed: " + ($(e.item).children(".k-link").text() || "ContextMenu"));
    }

    onSelect = (e) => {
        console.log("Selected: " + $(e.item).children(".k-link").text());
    }

    render() {
        return (
            <div id="example">     
                <h4>Menu</h4>
                 <Menu activate={this.onActivate}
                       deactivate={this.onDeactivate}
                       open={this.onOpen}
                       close={this.onClose}
                       select={this.onSelect} >
                     <MenuItem>
                         First Item
                         <SubMenu>
                             <MenuItem>Sub Item 1</MenuItem>
                             <MenuItem>Sub Item 2</MenuItem>
                             <MenuItem>Sub Item 3</MenuItem>
                             <MenuItem>Sub Item 4</MenuItem>
                         </SubMenu>
                     </MenuItem>
                     <MenuItem>
                         Second Item
                         <SubMenu>
                             <MenuItem>Sub Item 1</MenuItem>
                             <MenuItem>Sub Item 2</MenuItem>
                             <MenuItem>Sub Item 3</MenuItem>
                             <MenuItem>Sub Item 4</MenuItem>
                         </SubMenu>
                     </MenuItem>
                     <MenuItem>
                         Third Item
                         <SubMenu>
                             <MenuItem>Sub Item 1</MenuItem>
                             <MenuItem>Sub Item 2</MenuItem>
                             <MenuItem>Sub Item 3</MenuItem>
                             <MenuItem>Sub Item 4</MenuItem>
                         </SubMenu>
                     </MenuItem>
                </Menu>

                <br/> <br/><br/><br/><br/>
            </div>

        );
    }
}
ReactDOM.render(
    <MenuContainer/>,
    document.querySelector('my-app')
);
In this article