React ContextMenu - Overview

The ContextMenu UI component displays a single- or multi-level context menu. An end user invokes this menu by a right click or a long press.

View Demo

The following code adds the ContextMenu UI component to your page and binds it to an image using the target property. Note that the data source of the UI component declares several nesting levels. Items in the resulting context menu mirror this structure.

jQuery
JavaScript
HTML
var contextMenuItems = [
    { text: 'Zoom In' },
    { text: 'Zoom Out' },
    {
        text: 'Share',
        items: [{
            text: 'Send to a friend',
            items: [
                { text: 'Log in with Facebook' },
                { text: 'Log in with Twitter' }
            ]
        }, {
            text: 'Send to a group',
            items: [
                { text: 'Log in with Facebook' },
                { text: 'Log in with Twitter' }
            ]
        }]
    },
    { text: 'Comment' }
];

$(function() {
    $("#contextMenuContainer").dxContextMenu({
        items: contextMenuItems,
        target: "#someImage"
    });
});
<img id="someImage" src="http://here/goes/my.jpg">
<div id="contextMenuContainer"></div>
Angular
HTML
TypeScript
<img id="someImage" src="http://here/goes/my.jpg">
<dx-context-menu
    [items]="contextMenuItems"
    target="#someImage">
</dx-context-menu>
import { DxContextMenuModule } from 'devextreme-angular';
// ...
export class AppComponent {
    contextMenuItems = [
        { text: 'Zoom In' },
        { text: 'Zoom Out' },
        {
            text: 'Share',
            items: [{
                text: 'Send to a friend',
                items: [
                    { text: 'Log in with Facebook' },
                    { text: 'Log in with Twitter' }
                ]
            }, {
                text: 'Send to a group',
                items: [
                    { text: 'Log in with Facebook' },
                    { text: 'Log in with Twitter' }
                ]
            }]
        },
        { text: 'Comment' }
    ];
}
@NgModule({
     imports: [
         // ...
         DxContextMenuModule
     ],
     // ...
 })
Vue
App.vue
<template>
    <div>
        <img
            id="someImage"
            src="http://here/goes/my.jpg"
        >
        <DxContextMenu
            :items="contextMenuItems"
            target="#someImage"
        />
    </div>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxContextMenu from 'devextreme-vue/context-menu';

export default {
    components: {
        DxContextMenu
    },
    data() {
        return {
            contextMenuItems: [
                { text: 'Zoom In' },
                { text: 'Zoom Out' },
                {
                    text: 'Share',
                    items: [{
                        text: 'Send to a friend',
                        items: [
                            { text: 'Log in with Facebook' },
                            { text: 'Log in with Twitter' }
                        ]
                    }, {
                        text: 'Send to a group',
                        items: [
                            { text: 'Log in with Facebook' },
                            { text: 'Log in with Twitter' }
                        ]
                    }]
                },
                { text: 'Comment' }
            ]
        };
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { ContextMenu } from 'devextreme-react/context-menu';

const contextMenuItems = [
    { text: 'Zoom In' },
    { text: 'Zoom Out' },
    {
        text: 'Share',
        items: [{
            text: 'Send to a friend',
            items: [
                { text: 'Log in with Facebook' },
                { text: 'Log in with Twitter' }
            ]
        }, {
            text: 'Send to a group',
            items: [
                { text: 'Log in with Facebook' },
                { text: 'Log in with Twitter' }
            ]
        }]
    },
    { text: 'Comment' }
];

class App extends React.Component {
    render() {
        return (
            <div>
                <img id="someImage" src="http://here/goes/my.jpg" />
                <ContextMenu
                    items={contextMenuItems}
                    target="#someImage"
                />
            </div>
        );
    }
}

export default App;
See Also