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