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

Question

I'm new to Material-UI and just started fiddling around with their App bar with Menu example. When toggling the menu dropdown, it opens up over the Appbar itself, whereas I'd like it to open below the Navbar.

From the docs, I understand that this can be done with anchorEl as explained here. But when I implement this to my menu component nothing happens. What is "the right material-UI way" to take care of this?

class Header extends React.Component {   state = {     auth: true,     anchorEl: null,     anchorOriginVertical: 'bottom',     anchorOriginHorizontal: 'right',     transformOriginVertical: 'top',     transformOriginHorizontal: 'right',     anchorReference: 'anchorEl',   };    handleChange = (event, checked) => {     this.setState({ auth: checked });   };    handleMenu = event => {     this.setState({ anchorEl: event.currentTarget });   };    handleClose = () => {     this.setState({ anchorEl: null });   };    render() {     const { classes } = this.props;     const { auth, anchorEl } = this.state;     const open = Boolean(anchorEl);      return (       <div className={classes.root}>         <AppBar position="static">           <Toolbar>             <Typography type="title" color="inherit" className={classes.flex}>               Title             </Typography>             {auth && (               <div>                 <IconButton                   aria-owns={open ? 'menu-appbar' : null}                   aria-haspopup="true"                   onClick={this.handleMenu}                   color="contrast"                 >                   <AccountCircle />                 </IconButton>                 <Menu                   id="menu-appbar"                   anchorEl={anchorEl}                   open={open}                   onClose={this.handleClose}                 >                   <MenuItem onClick={this.handleClose}>Profile</MenuItem>                   <MenuItem onClick={this.handleClose}>My account</MenuItem>                 </Menu>               </div>             )}           </Toolbar>         </AppBar>       </div>     );   } } 

Answer 1

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.

Answer 2

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,     },   }} >