All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

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