CODEWITHSUNDEEP
reactjsmaterial-uijss
TheLearner
TheLearner

Reputation: 2863

How to build a full-width mega-menu using Material-UI?

Currently, my component looks like this:

<Menu
      id="customized-menu"
      className={classes.root}
      anchorEl={blogMenuAnchorEl}
      getContentAnchorEl={null}
      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
      transformOrigin={{ vertical: 'top', horizontal: 'center' }}
      open={blogMenu}
      onClose={closeBlogDropDown}
    >
      <MenuItem>
        <ListItemText primary="Latest Posts" />
      </MenuItem>
      <Divider variant="fullWidth" />
      <MenuItem>
        <ListItemText primary="Learn French" />
      </MenuItem>
      <MenuItem>
        <ListItemText primary="Learn Latin" />
      </MenuItem>
      <MenuItem>
        <ListItemText primary="Learn Italian" />
      </MenuItem>
    </Menu>
  );

This drop-down, of course, shrinks to fit the items it lists. However, what if I want the drop-down to be full-width? They call it a mega menu, I suppose. I tried adding a width: '100%' to the component's style but it had no effect because the actual drop-down div gets generated at runtime, to which I have no access during scripting.

The repo is up at https://github.com/amitschandillia/proost/tree/master/web_SO and the component in question is https://github.com/amitschandillia/proost/blob/master/web_SO/components/BlogDropDown.jsx.

REFERENCE: Here's an image of what I'm looking to emulate: enter image description here

Upvotes: 1

Views: 13160

Answers (2)

Someone Special
Someone Special

Reputation: 13588

For benefit of people who came here because of google search.

The props needed if you want the full width ( like a mega menu ) is with the following minimum settings of marginThreshold and PaperProps. These are props which will be pass to Popover API.

 <Menu
   anchorEl={anchorEl}
   marginThreshold={0}
   PaperProps={{
       style: {
            width: "100%",
            maxWidth: "100%",
            left: 0,
            right: 0,
          }
        }}
    anchorOrigin={{ vertical: "bottom" }}
    transformOrigin={{ vertical: "top" }}>

fork of the selected answer

Upvotes: 8

Ido
Ido

Reputation: 5758

You need to change the Popover paper width to 100% (the drop down is actually a popover):

const styles = (theme) => ({
  popoverPaper: {
    width: '100%',
    height: '100%',
    maxHeight: 'unset',
    maxWidth: 'unset',
  },
});

And than apply the style to popover paper:

<Menu
        PopoverClasses={{paper: props.classes.popoverPaper}}
        id="customized-menu"
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >

You can check this CodeSandbox example: https://codesandbox.io/s/material-demo-fmy64?fontsize=14

Upvotes: 5

Related Questions