Context Menu - Basics

The ContextMenu component displays a single- or multi-level context menu. An end user invokes this menu by a right click or a long press. This demo illustrates how to create a simple ContextMenu.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<div class="label"> Right click the image to show available actions: </div> <img id="image" alt="product" src="~/images/ProductsLarge/7.png" /> @(Html.DevExtreme().ContextMenu() .Width(200) .Target("#image") .OnItemClick("contextMenu_ItemClick") .DisplayExpr("Text") .ItemsExpr("Items") .DataSource(new object[] { new { Text = "Share", Items = new[] { new { Text = "Facebook" }, new { Text = "Twitter" } } }, new { Text = "Download" }, new { Text = "Comment" }, new { Text = "Favorite" } }) ) <script> function contextMenu_ItemClick(e) { if(!e.itemData.Items) { DevExpress.ui.notify("The \"" + e.itemData.Text + "\" item was clicked", "success", 1500); } } </script>

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class ContextMenuController : Controller { public ActionResult Basics() { return View(); } } }

#image { height: 300px; } .label { color: #767676; }