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

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.

<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>
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')
    );
In this article