How to make a dropdown menu open below the Appbar using Material-UI?

For me i had issue of jumping effect , after clicking first time .. i had to make keepMounted={false}

and you can get x and y value by adjusting translateX(10px) translateY(50px) from devTool.

                      <div>
                         <Menu
                                    id="simple-menu"
                                    anchorEl={anchorEl}
                                    keepMounted={false}
                                    open={Boolean(anchorEl)}
                                    onClose={this.handleClose}
                                    PaperProps={{
                                        style: {
                                            transform: 'translateX(10px) translateY(50px)',
                                        }
                                    }}
                                >
                                    <MenuItem onClick={this.handleClose}>My Account</MenuItem>
                                    <Divider variant="middle"/>
                                    <MenuItem onClick={this.handleClose}>Logout</MenuItem>
                                </Menu>
                            </div>

There is an error in Matheus answer, the type of anchorEl is not boolean, in ReactHooks it would need to be:

  const [menuOpen, setMenuOpen] = useState<boolean>(false);
  const [anchorEl, setAnchorEl] = useState()

  const recordButtonPosition = (event: any) => {
      setAnchorEl(event.currentTarget);
      setMenuOpen(true);
  }

  let closeMenu = () => {
      setMenuOpen(false);
  }

  return (
      <React.Fragment>
          <Button onClick={recordButtonPosition}>
              OPEN MENU
          </Button>
          <Menu
              anchorEl={anchorEl}
              open={menuOpen}
              onClose={closeMenu}>
              <MenuItem onClick={closeMenu}> ExampleMenuItem </MenuItem> 
          </Menu>
      </React.Fragment>
  );

This was my solution, hope this will help someone.

<Menu
  open={this.state.openProps}
  anchorEl={this.state.anchorEl}
  onClose={onClose}
  className={classes.styles}
  disableAutoFocusItem
  PaperProps={{
    style: {
      left: '50%',
      transform: 'translateX(-77%) translateY(32%)',
    }
  }}
  MenuListProps={{
    style: {
      padding: 0,
    },
  }}
>

I had a similar issue and the way I got it to work is by setting the properties on the menu itself like this:

  <Menu
    id="menu-appbar"
    anchorEl={anchorEl}
    getContentAnchorEl={null}
    anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
    transformOrigin={{ vertical: "top", horizontal: "center" }}
    open={open}
    onClose={this.handleClose}
    className={props.classes.menu}
  >

I had to put in getContentAnchorEl={null} to get the vertical properties to work, which I eventually learned from this issue https://github.com/mui-org/material-ui/issues/7961 .

Not sure how to do this when using the state to set the properties of the anchor element, but maybe this will get you started.