React/material-ui ListItem list sticky but overlapping

Question

I want to have a material-ui listitem with has sticky subheaders. I managed to get this sticky, but the subheader is overlapping with the items when scrolling:

How to prevent this? Full code:

    <List
      {...rest}
      className={clsx(classes.root, className)}
      subheader={<li />}
    >
      {pages.map(group => (
        <li>
          <ul className={classes.ul}>
            {group.groupname && <><Divider /><ListSubheader>{group.groupname}</ListSubheader></> }
            {group.routes.map(page => (
              <div key={page.title}>
                {page.children ? 
                  <>
                    <ListItem
                      className={classes.item}
                      disableGutters
                      key={page.title}
                    >                
                      {page.title}
                    </ListItem>
                    <Collapse in={state[page.title] ? true : false} timeout="auto" unmountOnExit>
                      <List component="div" disablePadding>
                        {page.children.map(childpage => (
                          <ListItem
                            className={classes.nested}
                            disableGutters
                            key={childpage.title}
                          >                
                            {childpage.title}
                          </ListItem>
                        ))}

                      </List>
                    </Collapse>
                  </>
                  : 
                  <ListItem
                    className={classes.item}
                    disableGutters
                    key={page.title}
                  >
                    {page.title}
                  </ListItem>
                }
              </div>
            ))}
          </ul>
        </li>
      ))}
    </List>

I expanded the example from the material-ui website

Answer 1

Currently having the exact same problem, with the addition of not being able to scroll to the bottom of my navbar whenever the list is fully extended:

I came up with a temporary solution, but I was unable to get the sticky feature of the subheader items to function without it overlapping with the content of the menu when scrolling.

For the overlapping issue, set disableSticky={true} on each of your ListSubheader elements. This should fix your specific issue.

My scrolling issue was caused by a top: 60 I had set in createMuiTheme To fix this I simply replaced top with padding:

/** Navigation Drawer **/
MuiDrawer: {
  paper: {
    paddingTop: 60,
    width: 256,
    minWidth: 150,
  }
}

Answer 2

You should use disableSticky prop.

Answer 3

The problem is with the size of Collapse component. Try set the prop collapsedSize to "auto".

<Collapse ... collapsedSize="auto">...</Collapse>

collapsedSize: The height of the container when collapsed.

The doc Collapse API

Answer 4

Well, the only workaround I found (using v4) was to style things a bit:

• To the subheader elm: background: white
• To the list root elm: overflow-y: auto

That way the subheader still overlaps with the underlying scrolling list, but it is not transparent, and the list handles its own scroll, preventing it from appearing on top of the sticky subheader when scrolling.