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

Kendo UI Layout wrapper for React

---
title: Context Menu
page_title: Context Menu - Menu - Kendo UI Wrappers for React
description: "Implement a context menu when utilizing the Kendo UI Menu wrapper for React."
slug: context_menu
position: 6
---

# Context Menu

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

You can define its items and initialize it with the wrapper, or use the API to add and remove its items. You can also specify a target for the Context Menu along with a filter for multiple targets as well as an event which will trigger the popping up of the Context Menu.

```html
<style>
  .k-menu-horizontal /* for all horizontal menus */
  {
     display: inline-block;
  }

  .fieldlist {
      margin: 0 0 -1em;
      padding-bottom: 2em;
  }

  .fieldlist li {
      list-style: none;
      padding-bottom: 1em;
  }
  .rectangle {
    width: 150px;
    height:100px;
    border-radius:5px;
    display: inline-block;
    margin: 20px;
  }

  .red {
      background-color:#ff6358;
  }
  .grey {
      background-color:#ededed;
  }
  .turquoise {
      background-color:#28b4c8;
  }
</style>
```
```jsx-preview
 class ContextMenuContainer extends React.Component {
     constructor(props) {
        super(props);
        this.state = {
         selectedOption: 'horizontal'
       };        
    }

    handleOptionChange = (e) => {
      this.setState({
        selectedOption: e.target.value
      });

      $("[data-role='contextmenu']").data("kendoContextMenu").setOptions({
          orientation: this.state.selectedOption
      })
    }

    render() {
        return (
            <div className="example-wrapper">
             <ul className="fieldlist">
                <li>
                     <input className="k-radio" type="radio" name="orientation" id="horizontal" value="horizontal"  onChange={this.handleOptionChange} checked={this.state.selectedOption === 'horizontal'}/>
                     <label className="k-radio-label" for="horizontal">Horizontal</label>
                </li>
                <li>
                    <input className="k-radio" type="radio" name="orientation" id="vertical" value="vertical"  onChange={this.handleOptionChange} checked={this.state.selectedOption === 'vertical'}/>
                    <label className="k-radio-label" for="vertical">Vertical</label>
                </li>
              </ul>
              <h5>Right click the rectangles to see the Kendo UI ContextMenu</h5>
                <div className="red rectangle"></div><div className="grey rectangle"></div><div className="turquoise rectangle"></div>
                 <ContextMenu
                    className="my-context-menu"
                    target={".rectangle"}
                    animation={
                        { open: { effects: "fadeIn" },
                        duration: 500}
                    }>
                     <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(
      <ContextMenuContainer />,
      document.querySelector('my-app')
    );
```

## Suggested Links

* [Kendo UI Context Menu for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/menu/contextmenu)
* [API Reference of the Context Menu Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/contextmenu)
* [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)