Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
Menu
Documentation
The Menu widget is a panel with clickable items. A click on an item opens a drop-down menu, which can contain several submenus.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<div class="form">
<div>
<div class="label">Catalog:</div>
@(Html.DevExtreme().Menu()
.ID("menu")
.DataSource(d => d.Mvc().LoadAction("GetProducts"))
.HideSubmenuOnMouseLeave(false)
.OnItemClick("menuItem_click")
)
<div id="product-details" class="hidden">
<img src="" />
<div class="name"></div>
<div class="price"></div>
</div>
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<div>Show First Submenu Mode</div>
@(Html.DevExtreme().SelectBox()
.DataSource(new JS("showSubmenuModes"))
.Value(new JS("showSubmenuModes[1]"))
.DisplayExpr("name")
.OnValueChanged("firstSubMenuMode_changed")
)
</div>
<div class="option">
<div>Orientation</div>
@(Html.DevExtreme().SelectBox()
.DataSource(new[] { "horizontal", "vertical" })
.Value("horizontal")
.OnValueChanged("menuOrientation_changed")
)
</div>
<div class="option">
<div>Submenu Direction</div>
@(Html.DevExtreme().SelectBox()
.DataSource(new[] { "auto", "rightOrBottom", "leftOrTop" })
.Value("auto")
.OnValueChanged("menuDirection_changed")
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Value(false)
.Text("Hide Submenu on Mouse Leave")
.OnValueChanged("checkBoxValue_changed")
)
</div>
</div>
</div>
<script>
var showSubmenuModes = [{
name: "onHover",
delay: { show: 0, hide: 500 }
}, {
name: "onClick",
delay: { show: 0, hide: 300 }
}];
function getMenuInstance() {
return $("#menu").dxMenu("instance");
}
function menuItem_click(data) {
var item = data.itemData;
if (item.price) {
$("#product-details").removeClass("hidden");
$("#product-details > img").attr("src", item.icon);
$("#product-details > .price").text("$" + item.price);
$("#product-details > .name").text(item.text);
}
}
function firstSubMenuMode_changed(data) {
getMenuInstance().option("showFirstSubmenuMode", data.value);
}
function menuOrientation_changed(data) {
getMenuInstance().option("orientation", data.value);
}
function menuDirection_changed(data) {
getMenuInstance().option("submenuDirection", data.value);
}
function checkBoxValue_changed(data) {
getMenuInstance().option("hideSubmenuOnMouseLeave", data.value);
}
</script>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using Newtonsoft.Json;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class MenuController : Controller {
public ActionResult Overview() {
return View();
}
[HttpGet]
public ActionResult GetProducts(DataSourceLoadOptions loadOptions) {
return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(MenuData.Products, loadOptions)), "application/json");
}
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public static class MenuData {
public static readonly IEnumerable<MenuItem> Products = new[] {
new MenuItem {
text = "Video Players",
items = new[] {
new MenuItem {
text = "HD Video Player",
price = 220,
icon = "../../Content/Images/ProductsLarge/1.png"
},
new MenuItem {
text = "SuperHD Video Player",
price = 270,
icon = "../../Content/Images/ProductsLarge/2.png"
}
}
},
new MenuItem {
text = "Televisions",
items = new[] {
new MenuItem {
text = "SuperLCD 42",
price = 1200,
icon = "../../Content/Images/ProductsLarge/7.png"
},
new MenuItem {
text = "SuperLED 42",
price = 1450,
icon = "../../Content/Images/ProductsLarge/5.png"
},
new MenuItem {
text = "SuperLED 50",
price = 1600,
icon = "../../Content/Images/ProductsLarge/4.png"
},
new MenuItem {
text = "SuperLCD 55 (Not available)",
price = 1350,
icon = "../../Content/Images/ProductsLarge/6.png",
disabled = true
},
new MenuItem {
text = "SuperLCD 70",
price = 4000,
icon = "../../Content/Images/ProductsLarge/9.png"
}
}
},
new MenuItem {
text = "Monitors",
items = new[] {
new MenuItem {
text = "19\"",
items = new[] {
new MenuItem {
text = "DesktopLCD 19",
price = 160,
icon = "../../Content/Images/ProductsLarge/10.png"
}
}
},
new MenuItem {
text = "21\"",
items = new[] {
new MenuItem {
text = "DesktopLCD 21",
price = 170,
icon = "../../Content/Images/ProductsLarge/12.png"
},
new MenuItem {
text = "DesktopLED 21",
price = 175,
icon = "../../Content/Images/ProductsLarge/13.png"
}
}
}
}
},
new MenuItem {
text = "Projectors",
items = new[] {
new MenuItem {
text = "Projector Plus",
price = 550,
icon = "../../Content/Images/ProductsLarge/14.png"
},
new MenuItem {
text = "Projector PlusHD",
price = 750,
icon = "../../Content/Images/ProductsLarge/15.png"
}
}
}
};
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace DevExtreme.MVC.Demos.Models {
public class MenuItem {
public string text { get; set; }
public bool disabled { get; set; }
public string icon { get; set; }
public int price { get; set; }
public IEnumerable<MenuItem> items { get; set; }
}
}
.form {
margin-left: 3px;
}
.form > div:first-child {
margin-right: 320px;
}
.label {
font-size: 22px;
}
#product-details {
width: 400px;
height: 400px;
margin: 20px auto 0;
}
#product-details > img {
height: 300px;
width: 400px;
}
#product-details > .name {
text-align: center;
font-size: 20px;
}
#product-details > .price {
text-align: center;
font-size: 24px;
}
.dark #product-details > div {
color: #f0f0f0;
}
.options {
padding: 20px;
position: absolute;
bottom: 0;
right: 0;
width: 260px;
top: 0;
background-color: rgba(191, 191, 191, 0.15);
}
.option {
margin-top: 10px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.hidden {
visibility: hidden;
}