Layout / Menu / Context Menu
material theme

Context Menu

The Context Menu is a Menu that is initialized inside a Popup component and it is opened on the onContextMenu event.

Basic Usage

The following example demonstrates the Context Menu in action.

import React from 'react';
import ReactDOM from 'react-dom';
import { Menu, MenuItem } from '@progress/kendo-react-layout';
import { Popup } from '@progress/kendo-react-popup';

class App extends React.Component {
    state = {
        show: false
    }

    handleContextMenu = (e) => {
        e.preventDefault();
        this.offSet = { left: e.clientX, top: e.clientY };
        this.setState({ show: true });
    }

    componentDidMount() {
        document.addEventListener('click', () => {
            this.state.show ? this.setState({ show: false }) : null;
        })
    }

    render() {
        return (
            <div>
                <div style={{
                    width: 300,
                    height: 200,
                    backgroundColor: "#5392e4",
                    justifyContent: "center",
                    display: "flex",
                    position: "absolute",
                    alignItems: "center",
                    left: this.state.left,
                    top: this.state.top
                }}
                    onContextMenu={this.handleContextMenu}>
                    <p>Right click here to open Context menu</p>
                </div>
                <Popup show={this.state.show} offset={this.offSet}>
                    <Menu vertical={true} style={{ display: 'inline-block' }}>
                        <MenuItem text="Item1">
                            <MenuItem text="Item1.1" />
                            <MenuItem text="Item1.2">
                                <MenuItem text="Item1.2.1" />
                                <MenuItem text="Item1.2.2" />
                            </MenuItem>
                        </MenuItem>
                        <MenuItem text="Item2">
                            <MenuItem text="Item2.1" />
                            <MenuItem text="Item2.2" />
                        </MenuItem>
                        <MenuItem text="Item3" />
                    </Menu>
                </Popup>
            </div>
        );
    }
}

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