DevExtreme Vue - Overview

The ContextMenu widget 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 widget to your page and binds it to an image using the target option. Note that the data source of the widget declares several nesting levels. Items in the resulting context menu mirror this structure.

jQuery
HTML
JavaScript
<img id="someImage" src="http://here/goes/my.jpg">
<div id="contextMenuContainer"></div>
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"
    });
});
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
     ],
     // ...
 })
See Also