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

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>

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:

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.

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