React Material-UI Cookbook

There's more...

When you have a lot of drawer items and sections, you can still overwhelm your users with the amount of information to parse. One solution is to have collapsible sections. For this, you can add a Button component to the ListSubheader component so that it's clickable.

Here's what the code looks like:

<ListSubheader>  <Button    disableRipple    classes={{ root: classes.listSubheader }}    onClick={toggleSection('cpu')}  >    CPU  </Button></ListSubheader>

The ripple effect that would normally happen when you click on a button is disabled here because you want the header text to still look like header text. This also requires a little bit of CSS customization in the listSubheader class:

const styles = theme => ({  alignContent: { alignSelf: ...