DevExtreme jQuery/JS - 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.
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"
- });
- });
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.