Render Scrollable Context Menu’ in Vue Context menu component

14 Dec 20247 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.

<template>
    <div>
        <div id="target">Right click / Touch hold to open the ContextMenu</div>
        <ejs-contextmenu 
            target="#target" 
            :items="menuItems" 
            :enableScrolling="true"
            @beforeOpen="beforeOpen"
        ></ejs-contextmenu>
    </div>
</template>

<script setup>
import { ContextMenuComponent as EjsContextmenu, MenuEventArgs } from "@syncfusion/ej2-vue-navigations";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

const 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' }
];

// Function to handle the 'beforeOpen' event
const beforeOpen = (args) => {
    args.element.parentElement.style.height = '150px';
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

#target {
    border: 1px dashed;
    height: 150px;
    padding: 10px;
    position: relative;
    text-align: justify;
    color: gray;
    user-select: none;
}
</style>
<template>
    <div>
        <div id="target">Right click / Touch hold to open the ContextMenu</div>
        <ejs-contextmenu 
            target="#target" 
            :items="menuItems" 
            :enableScrolling="true" 
            @beforeOpen="beforeOpen"
        ></ejs-contextmenu>
    </div>
</template>

<script>
import { ContextMenuComponent } from "@syncfusion/ej2-vue-navigations";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default {
    name: "App",
    components: {
        "ejs-contextmenu": ContextMenuComponent
    },
    data() {
        return {
            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' }
            ]
        };
    },
    methods: {
        beforeOpen(args) {
            args.element.parentElement.style.height = '150px';
        }
    }
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

#target {
    border: 1px dashed;
    height: 150px;
    padding: 10px;
    position: relative;
    text-align: justify;
    color: gray;
    user-select: none;
}
</style>