DevExtreme jQuery - Overview
The Menu widget is a panel with clickable items. A click on an item opens a drop-down menu, which can contain several submenus.
The following code adds the Menu widget to your page. Note that the data source of the widget declares several nesting levels. First-level items produce items for the widget panel, or "root items". Other items go to drop-down menus.
jQuery
HTML
JavaScript
<div id="menuContainer"></div>
var menuItems = [{
name: "Video Players",
items: [
{ name: "HD Video Player", price: 220 },
{ name: "SuperHD Video Player", price: 270 }
]
}, {
name: "Televisions",
items: [
{ name: "SuperLCD 42", price: 1200 },
{ name: "SuperLED 42", price: 1450 },
{ name: "SuperLED 50", price: 1600 }
]
}, {
name: "Monitors",
items: [{
name: "19\"",
items: [
{ name: "DesktopLCD 19", price: 160 }
]
}, {
name: "21\"",
items: [
{ name: "DesktopLCD 21", price: 170 },
{ name: "DesktopLED 21", price: 175 }
]
}]
}];
$(function () {
$("#menuContainer").dxMenu({
items: menuItems,
displayExpr: "name"
});
});Angular
HTML
TypeScript
<dx-menu
[items]="menuItems"
displayExpr="name">
</dx-menu>
import { DxMenuModule } from "devextreme-angular";
// ...
export class AppComponent {
menuItems = [{
name: "Video Players",
items: [
{ name: "HD Video Player", price: 220 },
{ name: "SuperHD Video Player", price: 270 }
]
}, {
name: "Televisions",
items: [
{ name: "SuperLCD 42", price: 1200 },
{ name: "SuperLED 42", price: 1450 },
{ name: "SuperLED 50", price: 1600 }
]
}, {
name: "Monitors",
items: [{
name: "19\"",
items: [
{ name: "DesktopLCD 19", price: 160 }
]
}, {
name: "21\"",
items: [
{ name: "DesktopLCD 21", price: 170 },
{ name: "DesktopLED 21", price: 175 }
]
}]
}];
}
@NgModule({
imports: [
// ...
DxMenuModule
],
// ...
})See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Menu - Access the Clicked Item
- Menu - Customize Item Appearance
- Menu - Change the Orientation
- Menu API Reference
Feedback