Angular Menu - Overview

The Menu UI component 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 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.

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