Having trouble getting help?
Contact Support
Contact Support
Set title in Vue Menu component
11 Jun 20248 minutes to read
In this sample , the title for menu item can be achievable by using ‘beforeItemRender’ client-side event in Menu component.
<template>
<div class="control-section">
<div class="menu-section">
<ejs-menu :items='menuItems' :beforeItemRender='beforeItemRender'></ejs-menu>
</div>
</div>
</template>
<script setup>
import { MenuComponent as EjsMenu } from "@syncfusion/ej2-vue-navigations";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
const menuItems = [
{
id: 'settingIcon',
iconCss: 'em-icons e-file',
items: [
{
text: 'Open',
items: [
{ text: 'Sub Option1' },
{ text: 'Sub Option2' },
]
},
{ text: 'Save' },
{ separator: true },
{ text: 'Exit' }
]
}
];
const beforeItemRender = (args) => {
if (args.item.id == 'settingIcon') {
args.element.setAttribute('title', 'Settings');
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
.em-icons {
font-family: 'e-menu';
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
text-transform: none;
}
.e-file::before {
content: '\e886';
}
.e-menu-wrapper .e-menu .e-menu-item.e-menu-caret-icon .e-icons.e-caret {
display: none;
}
.e-menu-wrapper .e-menu .e-menu-item.e-menu-caret-icon {
padding-right: 5px;
}
</style>
<template>
<div class="control-section">
<div class="menu-section">
<ejs-menu :items='menuItems' :beforeItemRender='beforeItemRender'></ejs-menu>
</div>
</div>
</template>
<script>
import { MenuComponent } from "@syncfusion/ej2-vue-navigations";
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {
name: "App",
components: {
"ejs-menu": MenuComponent
},
data: function () {
return {
menuItems: [
{
id: 'settingIcon',
iconCss: 'em-icons e-file',
items: [
{
text: 'Open',
items: [
{ text: 'Sub Option1' },
{ text: 'Sub Option2' },
]
},
{ text: 'Save' },
{ separator: true },
{ text: 'Exit' }
]
}
]
};
},
methods: {
beforeItemRender: function (args) {
if (args.item.id == 'settingIcon') {
args.element.setAttribute('title', 'Settings');
}
},
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
body {
margin-top: 100px;
text-align: center;
}
.em-icons {
font-family: 'e-menu';
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
text-transform: none;
}
.e-file::before {
content: '\e886';
}
.e-menu-wrapper .e-menu .e-menu-item.e-menu-caret-icon .e-icons.e-caret {
display: none;
}
.e-menu-wrapper .e-menu .e-menu-item.e-menu-caret-icon {
padding-right: 5px;
}
</style>