CODEWITHSUNDEEP
reactjsmaterial-ui
prashant bhat
prashant bhat

Reputation: 89

Mega menu using Material UI

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? enter image description here

Upvotes: 1

Views: 1466

Answers (2)

metal_jacke1
metal_jacke1

Reputation: 416

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>

Upvotes: 1

Kumar Shivam Ray
Kumar Shivam Ray

Reputation: 341

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;

Upvotes: 0

Related Questions