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