Render Scrollable Context Menu in React Context menu component

7 Oct 20255 minutes to read

The Context Menu component provides scrolling functionality through the enableScrolling property to manage overflow behavior when menu items exceed the available display area. This feature ensures all menu options remain accessible without disrupting page layout, particularly beneficial for menus with extensive item lists.

Enable scrolling by setting the enableScrolling property to true. Use the beforeOpen event to configure the menu container height and ensure proper scrollable area implementation.

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: 'View',
      items: [
        { text: 'Mobile' },
        { text: 'Desktop Smaller' },
        { text: 'Desktop Normal' },
        { text: 'Desktop Bigger Smaller' },
        { text: 'Desktop Bigger Normal' },
      ],
    },
    { text: 'Refresh' },
    { text: 'Paste' },
    { separator: true },
    { text: 'New' },
    { text: 'Personalize' },
  ];

  return (
    <div className="container">
      <div id="target">Right click / Touch hold to open the ContextMenu</div>
      <ContextMenuComponent
        id="contextmenu"
        target="#target"
        items={menuItems}
        enableScrolling={true}
        beforeOpen={(args) => {
          args.element.parentElement.style.height = '150px';
        }}
      />
    </div>
  );
}

export default App;
ReactDom.render(<App />, document.getElementById('element'));
import { enableRipple } from '@syncfusion/ej2-base';
import { ContextMenuComponent, MenuItemModel, MenuEventArgs } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

function App() {
  let menuItems: MenuItemModel[] = [
    {
      text: 'View',
      items: [
        { text: 'Mobile' },
        { text: 'Desktop Smaller' },
        { text: 'Desktop Normal' },
        { text: 'Desktop Bigger Smaller' },
        { text: 'Desktop Bigger Normal' },
      ],
    },
    { text: 'Refresh' },
    { text: 'Paste' },
    { separator: true },
    { text: 'New' },
    { text: 'Personalize' },
  ];

  return (
    <div className="container">
      <div id='target'>Right click / Touch hold to open the ContextMenu</div>
      <ContextMenuComponent
        id='contextmenu'
        target='#target'
        items={menuItems}
        enableScrolling={true}
        beforeOpen={(args: MenuEventArgs) => {
          args.element.parentElement.style.height = '150px';
        }}
      />
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));