Icons and navigation in React Context menu component

7 Oct 20258 minutes to read

Icons

The ContextMenu component supports icons and images on menu items to provide visual representation of actions and enhance user experience. To add an icon to a menu item, configure the iconCss property with the appropriate CSS class. By default, icons are positioned to the left side of the menu item text. In the following sample, icons for Cut, Copy and Paste menu items are added using the iconCss property with e-icons CSS classes.

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 = [
        {
            iconCss: 'e-cm-icons e-cut',
            text: 'Cut'
        },
        {
            iconCss: 'e-icons e-copy',
            text: 'Copy'
        },
        {
            iconCss: 'e-cm-icons e-paste',
            text: 'Paste'
        }
    ];
    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[] = [
    {
        iconCss: 'e-cm-icons e-cut',
        text: 'Cut'
    },
    {
        iconCss: 'e-icons e-copy',
        text: 'Copy'
    },
    {
        iconCss: 'e-cm-icons e-paste',
        text: 'Paste'
    }];

  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'));

URL Navigation

The ContextMenu component enables navigation to external web pages or internal routes when menu items are clicked. This functionality is implemented by configuring the url property with the target destination URL. When a menu item with a URL is selected, the browser navigates to the specified location. In the following sample, navigation URLs for Flipkart, Amazon, and Snapdeal menu items are configured using the url property.

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 = [
        {
            iconCss: 'e-cart-icon e-link',
            text: 'Flipkart',
            url: 'https://www.google.co.in/search?q=flipkart'
        },
        {
            iconCss: 'e-cart-icon e-link',
            text: 'Amazon',
            url: 'https://www.google.co.in/search?q=amazon'
        },
        {
            iconCss: 'e-cart-icon e-link',
            text: 'Snapdeal',
            url: 'https://www.google.co.in/search?q=snapdeal'
        }
    ];
    function itemBeforeEvent(args) {
        args.element.getElementsByTagName('a')[0].setAttribute('target', '_blank');
    }
    return (<div className="container">
            <div id='target'>Right click / Touch hold to open the ContextMenu</div>
            <ContextMenuComponent id='contextmenu' target='#target' items={menuItems} beforeItemRender={itemBeforeEvent}/>
          </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
import { enableRipple } from '@syncfusion/ej2-base';
import { ContextMenuComponent, MenuEventArgs, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

function App() {
  let menuItems: MenuItemModel[] = [
    {
        iconCss: 'e-cart-icon e-link',
        text: 'Flipkart',
        url: 'https://www.google.co.in/search?q=flipkart'
    },
    {
        iconCss: 'e-cart-icon e-link',
        text: 'Amazon',
        url: 'https://www.google.co.in/search?q=amazon'
    },
    {
        iconCss: 'e-cart-icon e-link',
        text: 'Snapdeal',
        url: 'https://www.google.co.in/search?q=snapdeal'
    }];

  function itemBeforeEvent(args: MenuEventArgs) {
      args.element.getElementsByTagName('a')[0].setAttribute('target', '_blank');
  }

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

To open the links in new tab, set target attribute with the value _blank in the beforeItemRender event.

See Also