Submenu Items in antd no scrollable

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