@progress/kendo-layout-react-wrapper/docs/menu/index.md

Kendo UI Layout wrapper for React

---
title: Overview
page_title: Overview - Menu - Kendo UI Wrappers for React
description: "Get an overview of the features the Kendo UI Menu wrapper for React delivers and use the component in React projects."
slug: overview_menu
position: 1
---

# 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](https://demos.telerik.com/kendo-ui/menu/index) widget.

## Basic Usage

The following example demonstrates the Menu in action.  

```jsx-preview
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

* [Images]({% slug images_menu %})
* [Orientation]({% slug orientation_menu %})
* [Direction]({% slug direction_menu %})
* [Animation effects]({% slug animations_menu %})
* [Context menu]({% slug context_menu %})

## Events

The following example demonstrates basic Menu events. You can subscribe to [all Menu events](https://docs.telerik.com/kendo-ui/api/javascript/ui/menu#events) by the handler name.

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

## Suggested Links

* [Kendo UI Menu for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/menu/overview)
* [API Reference of the Menu Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/menu)