Menu item click in EJ2 JavaScript Menu control

2 May 20236 minutes to read
You can open menu items and sub menu on menu item click by setting showItemOnClick property of the Menu. To open sub menu items only on item click, should be set as true.
index.js
index.html
ej.base.enableRipple(true);

var menuItems = [
    {
        text: "File",
        items: [
            { text: "Open" },
            { text: "Save" },
            { text: "Exit" }
        ]
    },
    {
        text: "Edit",
        items: [
            { text: "Cut" },
            { text: "Copy" },
            { text: "Paste" }
        ]
    },
    {
        text: "View",
        items: [
            {
                text: 'Toolbars',
                items: [
                    { text: 'Menu Bar' },
                    { text: 'Bookmarks Toolbar' },
                    { text: 'Customize' },
                ]
            },
            {
                text: 'Zoom',
                items: [
                    { text: 'Zoom In' },
                    { text: 'Zoom Out' },
                    { text: 'Reset' },
                ]
            },
            { text: 'Full Screen' }
        ],
    },
    {
        text: "Tools",
        items: [
            { text: "Spelling & Grammar" },
            { text: "Customize" },
            { text: "Options" }
        ]
    },
    { text: "Go" },
    { text: "Help" }
];

new ej.navigations.Menu({ items: menuItems, cssClass: "e-rounded-menu", showItemOnClick: true }, "#menu");
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/bootstrap.css" rel="stylesheet">

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">

    <!--system js reference and configuration-->
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div class="control-section">
            <ul id="menu"></ul>
        </div>
    </div>



<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>