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

Question

The way I got it to work is by setting the props 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}
  >

The positioning props (anchorOrigin, transformOrigin) come from the Popover component, see the demo: https://mui.com/material-ui/react-popover/#anchor-playground.

I also had to put in getContentAnchorEl={null} to get the vertical props to work, which I eventually learned from this issue https://github.com/mui/material-ui/issues/7961.
Edit: The getContentAnchorEl prop was removed in Material UI v5, it’s no longer needed.

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.

Leave a Comment Cancel reply