DevExtreme v25.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

JavaScript/jQuery Menu - Scrolling

The DevExtreme JavaScript 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
$(() => { const SUBMENU_HEIGHT = 200; let submenuMaxHeight = 0; $('#menu').dxMenu({ dataSource: menuData, hideSubmenuOnMouseLeave: false, onSubmenuShowing: ({ submenuContainer }) => { $(submenuContainer).css('maxHeight', submenuMaxHeight || ''); }, onItemClick(e) { if (!e.itemData.items) { DevExpress.ui.notify(`The "${e.itemData.text}" item was clicked`, 'success', 1500); } }, }).dxMenu('instance'); $('#limit-height').dxCheckBox({ value: false, text: `Limit submenu height to ${SUBMENU_HEIGHT}px`, onValueChanged(data) { submenuMaxHeight = data.value ? SUBMENU_HEIGHT : 0; }, }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" 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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.3/css/dx.light.css" /> <script src="js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="content"> <div class="label">Catalog:</div> <div id="menu"></div> </div> <div class="options"> <div class="caption">Options</div> <div class="option"> <div id="limit-height"></div> </div> </div> </div> </body> </html>
.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; }
const menuData = [ { 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', } ] } ] }, ];