Render Scrollable Context Menu in Angular Context menu component

18 Dec 20243 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 { BrowserModule } from '@angular/platform-browser';
import { ContextMenuModule, MenuEventArgs } from '@syncfusion/ej2-angular-navigations';
import { enableRipple } from '@syncfusion/ej2-base';
import { Component } from '@angular/core';
import { MenuItemModel } from '@syncfusion/ej2-navigations';

enableRipple(true);

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div class="e-section-control">
      <!-- Target element -->
      <div id="target">Right-click / Touch hold to open the ContextMenu</div>

      <!-- To Render ContextMenu. -->
      <ejs-contextmenu 
        id='contextmenu' 
        target='#target' 
        [items]='menuItems' 
        [enableScrolling]='true' 
        (beforeOpen)='beforeOpen($event)'>
      </ejs-contextmenu>
    </div>
  `,
  imports: [BrowserModule, ContextMenuModule]
})
export class AppComponent {
  public 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' }
  ];

  beforeOpen(args: MenuEventArgs): void {
    if (args.element.parentElement) {
      args.element.parentElement.style.height = '150px';
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));