Material UI: drawer with expandable side menu

Question

Using Material UI, how can I construct a Drawer with expandable menu items like the one on the material-ui.com site?

So I want something like this:

Each menu item (in bold) can expand to reveal sub-menu items.

How can this be achieved with Material UI?

Brooklyn

This may help. source code of material-ui site app drawer. github.com/mui-org/material-ui/blob/master/docs/src/modules/… – Estriol

I don't see AppDrawerNavItem as one of the API's on the material UI website. Can you please provide a working example on codesandbox.io or otherwise? – Brooklyn

AppDrawerNavItem is custom component. You can find it in same directory that AppDrawer exists. Sorry no live example :( github.com/mui-org/material-ui/blob/master/docs/src/modules/… – Estriol

can you please provide a working example? – Brooklyn

Sorry i was misleading you . its nothing to do with AppDrawer . its Lists docs: material-ui.com/demos/lists . live version: codesandbox.io/s/6xo0nlxn8k . – Estriol

Answer 1

you need a function open and close collapse

const [openCollapse, setOpenCollapse] = React.useState(false);    
 
function handleOpenSettings(){
    setOpenCollapse(!openCollapse);
}

return(
        <Drawer>
            <ListItem button onClick={handleOpenSettings}>
              <ListItemIcon>
                <Settings />
              </ListItemIcon>
              <ListItemText primary="Settings" />
              {openCollapse ? <ExpandLess /> : <ExpandMore />}
            </ListItem>
            <Collapse in={openCollapse} timeout="auto" unmountOnExit>
            <List component="div" disablePadding>
              <ListItem button className={classes.nested}>
                <ListItemIcon>
                  <Settings />
                </ListItemIcon>
                <ListItemText inset primary="Starred" />
              </ListItem>
            </List>
          </Collapse>
        </Drawer>
)

DEMO https://material-ui.com/components/lists/#simple-list

Swoosh

Thank you, that is a very useful link for other related questions as well – Interrogate