How to disable click event for SubMenu in Ant Design?

Question

I want to prevent the SubMenu from opening and closing its child menu items when you click on it. Is there a way to do this without setting it to disabled? (Which affects how the button looks) I essentially want the SubMenu to look the same, without toggling functionality of its children.

Answer 1

To achieve the desired behavior, you need to use combination of openKeys and onOpenChange properties of Menu like so:

const OPEN_KEYS = ['sub1'];

export default function App() {
  const [openKeys, setOpenKeys] = useState(OPEN_KEYS);
  const onOpenChange = openKeys => setOpenKeys([...OPEN_KEYS, ...openKeys]);
  return (
    <FlexBox>
      <Menu
        openKeys={openKeys}
        onOpenChange={onOpenChange}
      >
        ...
      </Menu>
    </FlexBox>
  );
}

In the above example, OPEN_KEYS will always stay open and won't affect its Menu.Item / Menu.ItemGroup children.