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