DevExtreme Vue - 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.

View Demo

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