React 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.

TS JS

Backend API

import React, { useCallback, useState } from 'react'; import Menu, { type MenuTypes } from 'devextreme-react/menu'; import CheckBox, { type CheckBoxTypes } from 'devextreme-react/check-box'; import notify from 'devextreme/ui/notify'; import service from './data.ts'; const SUBMENU_HEIGHT = 200; const products = service.getProducts(); const App = () => { const [limitSubmenuHeight, setLimitSubmenuHeight] = useState(false); const itemClick = useCallback((e: MenuTypes.ItemClickEvent) => { if (!e.itemData.items) { notify(`The "${e.itemData.text}" item was clicked`, 'success', 1500); } }, []); const limitSubmenuHeightOnMouseClick = useCallback((e: CheckBoxTypes.ValueChangedEvent) => { setLimitSubmenuHeight(e.value); }, [setLimitSubmenuHeight]); const onSubmenuShowing = useCallback(({ submenuContainer }: MenuTypes.SubmenuShowingEvent) => { submenuContainer.style.maxHeight = limitSubmenuHeight ? `${SUBMENU_HEIGHT}px` : ''; }, [limitSubmenuHeight]); return ( <div className="demo-container"> <div className="content"> <div className="label">Catalog:</div> <Menu dataSource={products} onItemClick={itemClick} onSubmenuShowing={onSubmenuShowing} /> </div> <div className="options"> <div className="caption">Options</div> <div className="option"> <CheckBox text={`Limit submenu height to ${SUBMENU_HEIGHT}px`} value={limitSubmenuHeight} onValueChanged={limitSubmenuHeightOnMouseClick} /> </div> </div> </div> ); }; export default App;

import React, { useCallback, useState } from 'react'; import Menu from 'devextreme-react/menu'; import CheckBox from 'devextreme-react/check-box'; import notify from 'devextreme/ui/notify'; import service from './data.js'; const SUBMENU_HEIGHT = 200; const products = service.getProducts(); const App = () => { const [limitSubmenuHeight, setLimitSubmenuHeight] = useState(false); const itemClick = useCallback((e) => { if (!e.itemData.items) { notify(`The "${e.itemData.text}" item was clicked`, 'success', 1500); } }, []); const limitSubmenuHeightOnMouseClick = useCallback( (e) => { setLimitSubmenuHeight(e.value); }, [setLimitSubmenuHeight], ); const onSubmenuShowing = useCallback( ({ submenuContainer }) => { submenuContainer.style.maxHeight = limitSubmenuHeight ? `${SUBMENU_HEIGHT}px` : ''; }, [limitSubmenuHeight], ); return ( <div className="demo-container"> <div className="content"> <div className="label">Catalog:</div> <Menu dataSource={products} onItemClick={itemClick} onSubmenuShowing={onSubmenuShowing} /> </div> <div className="options"> <div className="caption">Options</div> <div className="option"> <CheckBox text={`Limit submenu height to ${SUBMENU_HEIGHT}px`} value={limitSubmenuHeight} onValueChanged={limitSubmenuHeightOnMouseClick} /> </div> </div> </div> ); }; export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

<!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/25.1.7/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div id="app"></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; }