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
JavaScript
HTML
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"
    });
});
<div id="menuContainer"></div>
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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxMenu
        :items="menuItems"
        display-expr="name"
    />
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxMenu from 'devextreme-vue/menu';

export default {
    components: {
        DxMenu
    },
    data() {
        return {
            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 }
                    ]
                }]
            }]
        };
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Menu } from 'devextreme-react/menu';

const 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 }
        ]
    }]
}];

class App extends React.Component {
    render() {
        return (
            <Menu
                items={menuItems}
                displayExpr="name"
            />
        );
    }
}

export default App;
See Also