Context Menu - Templates

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

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 an image to display the context menu: </div> <img id="image" alt="product" src="~/Content/images/ProductsLarge/5.png" /> @(Html.DevExtreme().ContextMenu() .Width(200) .Target("#image") .ItemTemplate(@<text> <div class="item-template-container"> <% if(typeof Icon !== "undefined") { %> <span class="<%- Icon %> dx-icon"></span> <% } %> <span class="dx-menu-item-text"><%- Text %></span> <% if(typeof Items !== "undefined") { %> <span class="dx-icon-spinright dx-icon"></span> <% } %> </div> </text>) .OnItemClick("contextMenu_itemClick") .DisplayExpr("Text") .ItemsExpr("Items") .DataSource(new object[] { new { Text = "Share", Icon = "dx-icon-globe", Items = new[] { new { Text = "Facebook" }, new { Text = "Twitter" } } }, new { Text = "Download", Icon = "dx-icon-download" }, new { Text = "Add Comment", Icon = "dx-icon-add" }, new { Text = "Add to Favorite", Icon = "dx-icon-favorites" } }) ) <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.MVC.Demos.Models.SampleData; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ContextMenuController : Controller { public ActionResult Templates() { return View(); } } }

.item-template-container { display: flex; align-items: center; gap: 6px; width: 100%; } .dx-menu-item-text { flex-grow: 1; } #image { height: 300px; } .label { color: #767676; }