Icons and Navigation in React Context Menu

09 Oct 202610 minutes to read

Icons

The React Context Menu component supports icons and images on menu items to provide a 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; this position is automatically mirrored to the right when the component is rendered with enableRtl={true}. Only CSS/font icons are supported through iconCss (image URLs are not supported via iconCss).

For a full list of menu item fields — including iconCss, url, disabled, separator, children, and id — see the MenuItemModel API reference.

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 React Context Menu component enables navigation to external web pages or internal routes when menu items are clicked. This functionality is implemented by configuring the url property. 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'));

The MenuItemModel does not expose a target property directly. To open links in a new tab, set the target attribute to _blank on the rendered anchor element using the beforeItemRender event. The event handler receives a MenuEventArgs argument whose element field is the rendered DOM node for the item.

import { ContextMenuComponent, MenuEventArgs } from '@syncfusion/ej2-react-navigations';

function onBeforeItemRender(args: MenuEventArgs) {
    // The url item renders an <a> element inside the menu item.
    args.element.getElementsByTagName('a')[0].setAttribute('target', '_blank');
}

function App() {
    const menuItems = [
        { text: 'Flipkart', url: 'https://www.flipkart.com' },
        { text: 'Amazon', url: 'https://www.amazon.com' }
    ];
    return (
        <ContextMenuComponent target="#target" items={menuItems}
            beforeItemRender={onBeforeItemRender} />
    );
}

See also