All docs
V20.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

jQuery 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.common.css';
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.common.css';
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.common.css';
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.common.css';
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