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.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.
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>
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;jQuery
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.
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
});
});See Also
Feedback