Your search did not match any results.

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