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.

CodePudding user response：

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

CodePudding user response：

There is a :pseudo-element overlaying the popup which prevents the scrolling.

Add this .ant-menu-submenu-popup::before: pointer-events: none;