Render Scrollable Context Menu in React Context menu component

13 Dec 20245 minutes to read

To enable scrolling for the Context Menu, use the enableScrolling property to manage the overflow behavior of menu items by enabling or disabling scroll functionality. This is especially useful when dealing with a large number of menu items that exceed the viewport height, ensuring the context menu remains accessible without affecting the page layout.

To achieve this functionality, set the enableScrolling property to true. Additionally, use the beforeOpen event to adjust the height of the menu’s parent element, ensuring the scrollable area is applied correctly.

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