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.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<div class="demo-container"> <div class="content"> <div class="label">Catalog:</div> @(Html.DevExtreme().Menu() .ID("menu") .DataSource(d => d.Mvc().LoadAction("GetScrollingProducts")) .OnItemClick("menuItem_click") .OnSubmenuShowing("onSubmenu_showing") ) </div> <div class="options"> <div class="caption">Options</div> <div class="option"> @(Html.DevExtreme().CheckBox() .Value(false) .Text("Limit submenu height to 200 px") .OnValueChanged("checkBoxValue_changed") ) </div> </div> </div> <script> const SUBMENU_HEIGHT = 200; let submenuMaxHeight = 0; function menuItem_click(e) { if (!e.itemData.items) { DevExpress.ui.notify(`The "${e.itemData.text}" item was clicked`, 'success', 1500); } } function checkBoxValue_changed(data) { submenuMaxHeight = data.value ? SUBMENU_HEIGHT : 0; } function onSubmenu_showing({submenuContainer}) { $(submenuContainer).css("maxHeight", submenuMaxHeight || ''); } </script>

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; namespace DevExtreme.NETCore.Demos.Controllers { public class MenuController : Controller { public ActionResult Scrolling() { return View(); } } }

.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; }