DropDown menu is not aligning correctly in AppBar

user_4099320 0
Viewed 35

I am using MUI with react. The dropdown menu is not aligning correctly. I am following https://mui.com/material-ui/react-menu/#account-menu document.

My text code:

//** A styled component **//
const StyledToolbar = styled(Toolbar)({
  display: "flex",
  justifyContent: "space-between",
  backgroundColor: "#1e8e3e",
});


//** States **// 
  const [anchorEl, setAnchorEl] = useState(false);
  const open = Boolean(anchorEl);


//** Actual Menu code **//
      <Menu
        id="account-menu"
        anchorEl={anchorEl}
        keepMounted
        open={open}
        getContentAnchorEl={null}
        onClose={(e) => setAnchorEl(false)}
        onClick={(e) => setAnchorEl(false)}
        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
        PaperProps={{
          elevation: 0,
          sx: {
            overflow: 'visible',
            filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
            mt: 1.5,
            '& .MuiAvatar-root': {
              width: 32,
              height: 32,
              ml: -0.5,
              mr: 1,
            },
            '&:before': {
              content: '""',
              display: 'block',
              position: 'absolute',
              top: 0,
              right: 14,
              width: 10,
              height: 10,
              bgcolor: 'background.paper',
              transform: 'translateY(-50%) rotate(45deg)',
              zIndex: 0,
            },
          },
        }}
      >
        <MenuItem>
          <Typography variant="span">John K.</Typography>
        </MenuItem>
        <Divider />
        <MenuItem>
          <Avatar
            sx={{ bgcolor: green[500], margin: ".5rem", width: 24, height: 24 }}
          />
          Profile
        </MenuItem>
        <MenuItem>
          <ListItemIcon sx={{ color: green[500], margin: ".5rem" }}>
            <Settings fontSize="small" />
          </ListItemIcon>
          Settings
        </MenuItem>
        <Divider />
        <MenuItem onClick={handleSignOut}>
          <ListItemIcon sx={{ color: "#f50057", margin: ".5rem" }}>
            <Logout fontSize="small" />
          </ListItemIcon>
          Logout
        </MenuItem>
        {error && <span className="span">Something went wrong!</span>}
      </Menu>
  • If I am using the anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} the Menu is starting from the bottom of the window:

enter image description here

  • If I am using the anchorOrigin={{ horizontal: 'right', vertical: 'top' }} the Menu is starting from the top of the window but from the middle of the user profile image:

enter image description here

For many people, applying getContentAnchorEl={null} fixed the issue but for me its not working. I am using MUI v5.10.0

material-ui react-hooks reactjs
2 Answers

You need to specify an element to work as a reference, like an anchor, for the Menu to open from it. Or else it will just show in an edge of the page depending the anchorOrigin property settings you specify on the Menu component.

<>
      <Button
        id="basic-button"
        aria-controls={open ? "basic-menu" : undefined}
        aria-haspopup="true"
        aria-expanded={open ? "true" : undefined}
        onClick={handleClick}
      >
        Menu
      </Button>
      <Menu
        id="account-menu"
        anchorEl={anchorEl}
        keepMounted
        open={open}
        onClose={(e) => setAnchorEl(false)}
        onClick={(e) => setAnchorEl(false)}
        anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
        transformOrigin={{ horizontal: "right", vertical: "top" }}
        PaperProps={{
          elevation: 0,
          sx: {
            overflow: "visible",
            filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
            mt: 1.5,
            "& .MuiAvatar-root": {
              width: 32,
              height: 32,
              ml: -0.5,
              mr: 1
            },
            "&:before": {
              content: '""',
              display: "block",
              position: "absolute",
              top: 0,
              right: 14,
              width: 10,
              height: 10,
              bgcolor: "background.paper",
              transform: "translateY(-50%) rotate(45deg)",
              zIndex: 0
            }
          }
        }}
      >
        <MenuItem>
          <Typography variant="span">John K.</Typography>
        </MenuItem>
        <Divider />
        <MenuItem>
          <Avatar
            sx={{ bgcolor: "green", margin: ".5rem", width: 24, height: 24 }}
          />
          Profile
        </MenuItem>
        <MenuItem>
          <ListItemIcon sx={{ color: "green", margin: ".5rem" }}>
            <Settings fontSize="small" />
          </ListItemIcon>
          Settings
        </MenuItem>
        <Divider />
        <MenuItem
        >
          <ListItemIcon sx={{ color: "#f50057", margin: ".5rem" }}>
            <Logout fontSize="small" />
          </ListItemIcon>
          Logout
        </MenuItem>
      </Menu>
    <>

Here is the working codesanbox

user_53764040

Current target was missing in the code. After applying the following code, able to fix it:

const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

<Button
  id="basic-button"
  aria-controls={open ? "basic-menu" : undefined}
  aria-haspopup="true"
  aria-expanded={open ? "true" : undefined}
  onClick={handleClick}                         /* Need to include this to set the target pointer */
>

And remove getContentAnchorEl={null} entry from the <Menu>. Else it may generate the following error:

Warning: React does not recognize the `getContentAnchorEl` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `getcontentanchorel` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
user_40993200
Related