Vue Menu - Scrolling

The DevExtreme Menu component supports submenu item scrolling. If combined item height exceeds screen size or a pre-defined height limit, a scrollbar appears on-screen.

You can use one of the following event handlers to configure submenus as requirements dictate:

These handlers can access the root submenu element (submenuContainer) and data from root and submenu items (itemData).

In this demo, the onSubmenuShowing function limits submenu height to 200px.

Backend API

<template> <div class="demo-container"> <div class="content"> <div class="label">Catalog:</div> <DxMenu :data-source="products" @item-click="itemClick" @submenu-showing="onSubmenuShowing" /> </div> <div class="options"> <div class="caption">Options</div> <div class="option"> <DxCheckBox v-model:value="limitSubmenuHeight" :text="`Limit submenu height to ${SUBMENU_HEIGHT}px`" /> </div> </div> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import DxMenu, { type DxMenuTypes } from 'devextreme-vue/menu'; import DxCheckBox from 'devextreme-vue/check-box'; import notify from 'devextreme/ui/notify'; import service from './data.ts'; import type { ProductType } from './types'; const SUBMENU_HEIGHT = 200; const products = ref(service.getProducts()); const limitSubmenuHeight = ref(false); function itemClick(e: DxMenuTypes.ItemClickEvent<ProductType>) { if (!e.itemData?.items) { notify(`The "${e.itemData?.text}" item was clicked`, 'success', 1500); } } function onSubmenuShowing(e: DxMenuTypes.SubmenuShowingEvent<ProductType>) { if (e.submenuContainer) { e.submenuContainer.style.maxHeight = limitSubmenuHeight.value ? `${SUBMENU_HEIGHT}px` : ''; } } </script> <style> .demo-container { display: flex; } .label { font-size: 22px; padding-bottom: 24px; } .content { flex-grow: 1; width: 100%; min-width: 500px; overflow: clip; } .options { display: flex; flex-direction: column; padding: 20px; background-color: rgba(191, 191, 191, 0.15); } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; } </style>

import type { ProductType } from './types'; const products: ProductType[] = [ { text: 'Electronics', items: [ { text: 'Computers', items: [ { text: 'Desktops', }, { text: 'Laptops', }, { text: 'Tablets', }, { text: 'Monitors', }, { text: 'Printers', }, { text: 'Scanners', }, { text: 'Servers', }, { text: 'Network Devices', }, { text: 'Warranties', }, { text: 'Projectors & Screens', }, { text: 'Computer Accessories', }, ], }, { text: 'Cell Phones', items: [ { text: 'Home & Office Phones', }, { text: 'Smart Phones & PDAs', }, { text: 'Senior Cell Phones', }, { text: 'Mobile Broadband Devices', }, { text: 'Cell Phone Accessories', }, ], }, { text: 'Camera & Photo', items: [ { text: 'Action Cameras', }, { text: 'Camcorders', }, { text: 'Digital Cameras', }, { text: 'Digital Picture Frames', }, { text: 'Film Cameras', }, { text: 'Professional Video Cameras', }, { text: 'Flashes', }, { text: 'Lenses', }, { text: 'Photo Printers', }, { text: 'Film & Slide Scanners', }, { text: 'Slide Projectors', }, { text: 'Slide Viewers', }, { text: 'Tripods & Monopods', }, { text: 'Underwater Video & Photography', }, { text: 'Camera Accessories', }, ], }, { text: 'Audio', items: [ { text: 'Boomboxes', }, { text: 'DVD & CD Player Bags', }, { text: 'Hi-Fi & Home Audio Accessories', }, { text: 'Media Streaming Devices', }, { text: 'MP3 & Digital Media Players', }, { text: 'MP3 Player Accessories', }, { text: 'Personal Cassette Players', }, { text: 'Personal CD Players', }, { text: 'Compact Stereos', }, { text: 'Speakers', }, ], }, { text: 'Home Appliances', items: [ { text: 'Air Conditioners', }, { text: 'Coffee Machines', }, { text: 'Fans', }, { text: 'Lamps', }, { text: 'Microwaves', }, { text: 'Refrigerators', }, { text: 'Washers & Dryers', }, { text: ' Water Heaters', }, { 'text': 'Vacuum', }, { text: 'Steaming & Ironing', }, ], }, ], }, { text: 'Entertainment', items: [ { text: 'Films & Music', items: [ { text: 'TV Shows', }, { text: 'DVD', }, { text: 'Blu-ray', }, { text: 'CD', }, { text: 'SACD', }, { text: 'Vinyl', }, { text: 'Cassette', }, { text: 'Musical Instruments', }, { text: 'DJ Equipment', }, ], }, { text: 'Games & Toys', items: [ { text: 'PC Games', }, { text: 'Virtual Reality', }, { text: 'Boxed Games', }, { text: 'Download Games', }, { text: 'Handheld Game Systems', }, { text: 'Legacy Systems', }, { text: 'Cards', }, ], }, ], }, { text: 'Healthcare & Living', items: [ { text: 'Sports & Outdoors', items: [ { text: 'Camping', }, { text: 'Fitness', }, { text: 'Football', }, { text: 'Cycling', }, { text: 'Running', }, { text: 'Sport Electronics', }, { text: 'Sport Apparel', }, { text: 'Trainers & Tennis Shoes', }, ], }, { text: 'Beauty', items: [ { text: 'Bath & Shower', }, { text: 'Skin Care', }, { text: 'Hair Care', }, { text: 'Nail Care', }, { text: 'Make-up', }, { text: 'Fragrance', }, { text: 'Salon & SPA Equipment', }, { text: 'Tools & Accessories', }, ], }, { text: 'Fashion', items: [ { text: 'Clothing', }, { text: 'Jewellery', }, { text: 'Shoes', }, { text: 'Handbags & Shoulder Bags', }, { text: 'Watches', }, { text: 'Accessories', }, ], }, ], }, ]; export default { getProducts() { return products; }, };

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

interface ProductItemType { text: string; } export interface ProductType { text: string; items: (ProductType | ProductItemType)[]; }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div id="app"></div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>