The following code adds the Menu UI component to your page. Note that the data source of the UI component declares several nesting levels. First-level items produce items for the UI component 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.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.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;

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

jQuery Menu - Overview

jQuery

Angular

Vue

React

See Also