Render with separator in React Context menu component

7 Oct 20254 minutes to read

The Separators are horizontal lines that are used to separate the menu items. You cannot select the separators. You can enable separators to group the menu items using the separator property. Cut, Copy, and Paste menu items are grouped using separator property in the following sample.

import { enableRipple } from '@syncfusion/ej2-base';
import { ContextMenuComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
    let menuItems = [
        {
            text: 'Cut'
        },
        {
            text: 'Copy'
        },
        {
            text: 'Paste'
        },
        {
            separator: true
        },
        {
            text: 'Font'
        },
        {
            text: 'Paragraph'
        }
    ];
    return (<div className="container">
                <div id='target'>Right click / Touch hold to open the ContextMenu</div>
                <ContextMenuComponent id='contextmenu' target='#target' items={menuItems}/>
            </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
import { enableRipple } from '@syncfusion/ej2-base';
import { ContextMenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

function App() {
  let menuItems: MenuItemModel[] = [
    {
        text: 'Cut'
    },
    {
        text: 'Copy'
    },
    {
        text: 'Paste'
    },
    {
        separator: true
    },
    {
        text: 'Font'
    },
    {
        text: 'Paragraph'
    }];

    return (
            <div className="container">
                <div id='target'>Right click / Touch hold to open the ContextMenu</div>
                <ContextMenuComponent id='contextmenu' target='#target' items={menuItems}/>
            </div>
        );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

The separator property should not be given along with
the other fields in the MenuItem.