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.
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
// Menu items definition
let menuItems = [
{
items: [
{ text: 'Open' },
{ text: 'Save' },
{ separator: true },
{ text: 'Exit' }
],
text: 'File'
},
{
items: [
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' }
],
text: 'Edit'
},
{
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: 'View'
},
{
items: [
{ text: 'Spelling & Grammar' },
{ text: 'Customize' },
{ text: 'Options' }
],
text: 'Tools'
},
{ text: 'Go' },
{ text: 'Help' }
];
return (<MenuComponent items={menuItems} showItemOnClick={true}/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React ContextMenu</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import { enableRipple } from '@syncfusion/ej2-base';
import { MenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
// Menu items definition
let menuItems: MenuItemModel[] = [
{
items: [
{ text: 'Open' },
{ text: 'Save' },
{ separator: true },
{ text: 'Exit' }
],
text: 'File'
},
{
items: [
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' }
],
text: 'Edit'
},
{
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: 'View'
},
{
items: [
{ text: 'Spelling & Grammar' },
{ text: 'Customize' },
{ text: 'Options' }
],
text: 'Tools'
},
{ text: 'Go' },
{ text: 'Help' }
];
return (
<MenuComponent items={menuItems} showItemOnClick={true}/>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));