React Menu - Customize Item Appearance

For a minor customization of Menu items, you can define specific fields in item data objects. For example, the following code generates two root items with two drop-down menu items each. The root items are supplied with icons.

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Menu } from 'devextreme-react/menu';
  •  
  • const menuItems = [{
  • text: 'Upload', icon: 'upload',
  • items: [
  • { text: 'From your computer' },
  • { text: 'From a cloud service' }
  • ]
  • }, {
  • text: 'Share', icon: 'message',
  • items: [
  • { text: 'Log in with Facebook' },
  • { text: 'Log in with Twitter' }
  • ]
  • }];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Menu
  • items={menuItems}
  • />
  • );
  • }
  • }
  •  
  • export default App;

If you need a more flexible solution, define an itemTemplate.

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Menu } from 'devextreme-react/menu';
  •  
  • const menuItems = [{
  • text: 'Upload',
  • items: [
  • { text: 'From your computer' },
  • { text: 'From a cloud service' }
  • ]
  • }, {
  • text: 'Share',
  • items: [
  • { text: 'Log in with Facebook' },
  • { text: 'Log in with Twitter' }
  • ]
  • }];
  •  
  • const renderMenuItem = (itemData) => {
  • return (
  • <i>{itemData.text}</i>
  • );
  • }
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Menu
  • items={menuItems}
  • itemRender={renderMenuItem}
  • />
  • );
  • }
  • }
  •  
  • export default App;
See Also