Submenu Items in antd no scrollable - css

Question

Trying to get the submenu items in antd scrollable, with the below code
Codesandbox Link: https://codesandbox.io/s/dazzling-antonelli-t4g3nu?file=/index.js
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Menu, Icon } from "antd";
const { SubMenu } = Menu;
function handleClick(e) {
console.log("click", e);
}
const options = [
{ key: "1", value: "option1" },
{ key: "2", value: "option12" },
{ key: "3", value: "option13" },
{ key: "4", value: "option14" },
{ key: "5", value: "option15" },
{ key: "6", value: "option16" },
{ key: "7", value: "option17" },
{ key: "8", value: "option18" },
{ key: "9", value: "option19" },
{ key: "10", value: "option134" },
{ key: "11", value: "option132" },
{ key: "12", value: "option142" },
{ key: "13", value: "option123" }
];
ReactDOM.render(
<Menu onClick={handleClick} style={{ width: 256 }} mode="vertical">
<SubMenu
key="sub4"
title={
<span>
<Icon type="setting" />
<span>Navigation Three</span>
</span>
}
>
<div style={{ height: "100px", overflow: "scroll" }}>
{options?.map((data) => {
return <li style={{ lineHeight: "20px" }}> {data?.value} </li>;
})}
</div>
</SubMenu>
</Menu>,
document.getElementById("container")
);
the items displayed in submenu is not scrollable even though the scroll icon is present, need some help in fixing it.
Thanks.

Answer 1

You have to return Item in the Submenu.
https://codesandbox.io/s/interesting-sky-wmytdr?file=/index.js:805-1075
<SubMenu
key="sub4"
title={
<span>
<Icon type="setting" />
<span>Navigation Three</span>
</span>
}
>
{options?.map((data) => {
return <Menu.Item> {data?.value} </Menu.Item>;
})}
</SubMenu>
To have scroll, you have to target the ant-submenu
.ant-menu-submenu-popup {
max-height: 100px ;
overflow: auto ;
}

Answer 2

There is a :pseudo-element overlaying the popup which prevents the scrolling.
Add this .ant-menu-submenu-popup::before:
pointer-events: none;