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