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.
- <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:
- <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
If you have technical questions, please create a support ticket in the DevExpress Support Center.