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.

jQuery
JavaScript
HTML
var 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' }
    ]
}];

$(function() {
    $("#menuContainer").dxMenu({
        items: menuItems
    });
});
<div id="menuContainer"></div>
Angular
HTML
TypeScript
<dx-menu
    [items]="menuItems">
</dx-menu>
import { DxMenuModule } from 'devextreme-angular';
// ...
export class AppComponent {
    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' }
        ]
    }];
}
@NgModule({
    imports: [
        // ...
        DxMenuModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxMenu
        :items="menuItems"
    />
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxMenu from 'devextreme-vue/menu';

export default {
    components: {
        DxMenu
    },
    data() {
        return {
            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' }
                ]
            }]
        };
    }
};
</script>
React
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. In Angular and Vue, you can declare it in the markup. In React, you can use a rendering function (shown in the code below) or component:

Angular
HTML
TypeScript
<dx-menu
    [items]="menuItems"
    itemTemplate="items">
    <div *dxTemplate="let item of 'items'">
        <i>{{item.text}}</i>
    </div>
</dx-menu>
import { DxMenuModule } from 'devextreme-angular';
// ...
export class AppComponent {
    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' }
        ]
    }];
}
@NgModule({
    imports: [
        // ...
        DxMenuModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxMenu
        :items="menuItems"
        item-template="item">
        <template #item="{ data }">
            <i>{{data.text}}</i>
        </template>
    </DxMenu>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxMenu from 'devextreme-vue/menu';

export default {
    components: {
        DxMenu
    },
    data() {
        return {
            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' }
                ]
            }]
        };
    }
};
</script>
React
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;

If you use jQuery, use DOM manipulation methods to combine the HTML markup for menu items. To apply this markup, use the itemTemplate callback function as shown in the following code:

jQuery
JavaScript
HTML
var 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' }
    ]
}];

$(function() {
    $("#menuContainer").dxMenu({
        items: menuItems,
        itemTemplate: function(itemData, itemIndex, itemElement) {
            itemElement.append("<i>" + itemData.text + "</i>");
        }
    });
});
<div id="menuContainer"></div>

You can also customize an individual menu item. For this purpose, declare a template for this item as a script and pass its id to the template field of the item's data object.

jQuery
HTML
JavaScript
<script id="individualTemplate" type="text/html">
    <i>Upload</i>
</script>
var menuItems = [{
    text: "Upload", icon: "upload",
    template: $("#individualTemplate"),
    items: [
        { 
            template: function() {
                return $("<i>").text("From your computer");
            }
        }
    ]
}];

$(function() {
    $("#menuContainer").dxMenu({
        items: menuItems
    });
});

In addition, you can use a 3rd-party template engine to customize UI component appearance. For more information, see the 3rd-Party Template Engines article.

See Also