Set title for Menu Items

17 Feb 20222 minutes to read

In this sample , the title for settings icon can be achievable by using beforeItemRender client-side event in Menu component.

<ejs-menu id="menu" items="ViewBag.menuItems" beforeItemRender="itemRender"></ejs-menu>

<script>
function itemRender(args) {
        if (args.item.id == 'settingIcon') {
        args.element.setAttribute('title', 'Settings');
      }
    }
</script>

<style>
    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>
public ActionResult Title()
{
    List<object> menuItems = new List<object>();
    menuItems.Add(new
    {
        id: 'settingIcon',
        iconCss: 'em-icons e-file',
        items = new List<object>()
        {
            new { text = "Open",
            items = new List<object>()
        {
            new { text = "Option 1" },
            new { text = "Option 2" }
        } },
            new { text = "Save" },
            { separator: true },
            new { text = "Exit" }
        }
    });
        ViewBag.menuItems = menuItems;
    return View();
}