Render Scrollable Context Menu in Angular Context menu component

4 Sep 20253 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 { 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));