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.

Catalog:

Options

<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.MVC.Demos.Models.SampleData;
using System.Text.Json;
using System.Web.Mvc;

namespace DevExtreme.MVC.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;
}