Your search did not match any results.
Context Menu

Templates

Documentation

The ContextMenu widget provides full control over the appearance and behavior of menu items across all nesting levels.

Copy to CodeSandBox
Apply
Reset
import React from 'react'; import ContextMenu from 'devextreme-react/context-menu'; import notify from 'devextreme/ui/notify'; import { contextMenuItems as items } from './data.js'; function itemClick(e) { if (!e.itemData.items) { notify(`The "${ e.itemData.text }" item was clicked`, 'success', 1500); } } function ItemTemplate(e) { return ( <React.Fragment> <span className={ e.icon } /> { e.items ? <span className="dx-icon-spinright" /> : null } { e.text } </React.Fragment> ); } class App extends React.Component { render() { return ( <React.Fragment> <div className="label"> Right click an image to display the context menu: </div> <img id="image" src="../../../../images/products/5.png" /> <ContextMenu dataSource={items} width={200} target="#image" itemRender={ItemTemplate} onItemClick={itemClick} /> </React.Fragment> ); } } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
.dx-menu-item-content span { margin-right: 5px; } .dx-menu-item .dx-icon-spinright { position: absolute; top: 7px; right: 2px; } #image{ height: 300px; } .label { color: #767676; }
export const contextMenuItems = [ { text: 'Share', icon: 'dx-icon-globe', items: [ { text: 'Facebook' }, { text: 'Twitter' }] }, { text: 'Download', icon: 'dx-icon-download' }, { text: 'Add Comment', icon: 'dx-icon-add' }, { text: 'Add to Favorite', icon: 'dx-icon-favorites' } ];
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@19.2', 'devextreme-react': 'npm:devextreme-react@19.2', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'devexpress-gantt': 'npm:devexpress-gantt', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });