Mega menu using Material UI - reactjs

Question

I am trying to do something like this using react.js Material UI. I know we can use the menu component in Material UI But how can we have multiple columns and rows as shown in the image below?

Answer 1

Material-Ui allows you to target the <ul> generated by the <Menu> component via class MuiList-root. All we need to do is set it to display: flex and set the flex-direction to row.
Then all MenuItems we set inside divs will be their own columns.
<Menu
id="my-menu"
anchorEl={myAnchor}
open={Open}
onClose={handleClose}
sx={{
"& .MuiList-root": { // Target the <ul>
display: "flex",
flexDirection: "row",
},
}}
>
// Column One
<div style={{ display: "flex", flexDirection: "column" }}>
<MenuItem>Item #1</MenuItem>
</div>
// Column Two
<div style={{ display: "flex", flexDirection: "column" }}>
<MenuItem>Item #2</MenuItem>
</div>
</Menu>

Answer 2

To do this you use a pop-up dialog instead of a menu.
But to use it with a menu you could just create the view separately and pass it to the menu as a child.
Like.
custom_menu.js <- menu view code in this file
const CustomMenu = () => {
return (
<div>
{/* menu code here */}
</div>
}
export default CustomMenu;
import this js file to the js file which will have the definition of the menu.
x.js <- custom_menu.js used in this file
import CustomMenu from "..." // path/to/custom_menu.js
const X = () => {
return (
<MenuItem>
<CustomMenu />
</MenuItem>
)
}
export default X;