Material UI: Nest Menu Items Fail to Display

Question

I am using Material UI with React and am unable to get the submenu to display. Clicking on Browse in the top level menu simply closes the menu. Pressing Enter while hovering on it does the same. Pressing the right arrow key does nothing.

class TopNav extends React.Component {
  state = {
    anchorElement : null
  };

  handleClick = event => {
    this.setState({ anchorElement : event.currentTarget })
  };

  handleClose = () => {
    this.setState({ anchorElement : null })
  };


  render() {
    const {classes} = this.props;
    const {anchorElement} = this.state;

    return (
      <React.Fragment>
        <AppBar position='static' className={ classes.root }>
          <OuterContainer>
            <IconButton
              className={ classes.menuButton }
              onClick={this.handleClick}
            >
              <FaBars size='1.5rem' />
            </IconButton>

            <Menu
              anchorEl={anchorElement}
              open={Boolean(anchorElement)}
              onClose={this.handleClose}
            >
              <MenuItem
                onClick={this.handleClose}
              >Home</MenuItem>
              <MenuItem
                onClick={this.handleClose}
                checked={true}
                menuItems={[
                  <MenuItem>Pet Rocks</MenuItem>,
                  <MenuItem>Support Rocks</MenuItem>
                ]}
              >Browse</MenuItem>
            </Menu>
          <...removed>

I've also tried using ListItem in place of MenuItem. The styling is worse and there is no change to the menu simply closing instead of displaying the submenu.

I also tried using nestedItems in place of the menuItems prop. No change to anything.

Anyone know what could be the problem?

I briefly read that a touch version of this library has a problem with premature closing, not sure if that is a potential issue here but i thought I'd note it.

// package.json
{
  "dependencies": {
    "@material-ui/core": "^3.9.2",
    "dotenv": "^6.2.0",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-icons": "^3.4.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.5",
    "styled-components": "^4.1.3"
  },,
  "devDependencies": {
    "lodash": "^4.17.11"
  }
}

Answer 1

MenuItem does not have a menuItems property for doing nested menus, so I would expect Browse and Home to behave exactly the same (which I think is what you are seeing).

AppDrawerNavItem is the component used for the items in the navigation drawer in the documentation. It uses Collapse for the nested items. You should be able to model off its approach to do nested MenuItems.

Here's a portion of the AppDrawerNavItem code with some comments added by me:

    if (href) {
      // This is the leaf item case, so the ListItem acts as a link to the href provided.
      return (
        <ListItem className={classes.itemLeaf} disableGutters {...other}>
          <Button
            component={props => (
              <Link naked activeClassName={classes.active} href={href} {...props} />
            )}
            className={clsx(classes.buttonLeaf, `depth-${depth}`)}
            disableRipple
            onClick={onClick}
            style={style}
          >
            {title}
          </Button>
        </ListItem>
      );
    }
    // This is the case of a parent of nested items.
    // Clicking on this toggles the `open` state which opens/closes the Collapse
    // which would contain the nested items.
    return (
      <ListItem className={classes.item} disableGutters {...other}>
        <Button
          classes={{
            root: classes.button,
            label: openImmediately ? 'algolia-lvl0' : '',
          }}
          onClick={this.handleClick}
          style={style}
        >
          {title}
        </Button>
        <Collapse in={this.state.open} timeout="auto" unmountOnExit>
          {children}
        </Collapse>
      </ListItem>
    );
  }