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

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

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>

Vue Menu - Customize Item Appearance

See Also