How to style the Active Drawer ListItem in Material-UI
Tags: gatsby, react, webdev, materialui
Published: 2021-08-06 23:28:56

Wondering how to set or style the active link in Material-UI? This Material-UI tutorial will teach you how to style an active drawer / tab item with simplest code possible. 

The Mui AppBar and Drawer provide a great starting point - but they don't provide a solid foundation for highlighting the active tab. As a result, many developers end up with 'hacky' methods of setting active nav items. Fortunately, there's a better way.

  
### Demo
[Live Site](https://snappywebdesign.github.io/csb-h8lqf/ "Live Deployed Demo")  
[Codesandbox Demo](https://codesandbox.io/s/github/SnappyWebDesign/Material-UI_Active_ListItem_Tutorial/tree/main/?file=/src/components/DrawerDemo.js "Codesandbox Demo")  
[Github Repo](https://github.com/SnappyWebDesign/Material-UI_Active_ListItem_Tutorial "Github: Material-UI_Active_ListItem_Tutorial")  


### Preview: 
  
![Screenshot 2021-08-03 155528](//images.contentful.com/z7pyyvho21dm/2JmGSRe0zSQC2x5p9k8GPC/0598e1d60204f4e7cc8cfa670c7afce8/Screenshot_2021-08-03_155528.jpg)
  

### Boilerplate (Starting Point)

```javascript{1-22}
import React from "react"
import { Link } from "gatsby" OR "@material-ui/core/Link"
import Drawer from "@material-ui/core/Drawer"
import List from "@material-ui/core/List"
import ListItem from "@material-ui/core/ListItem"
import ListItemText from "@material-ui/core/ListItemText"

export default function MuiDrawer() {
  return (
      <Drawer variant="permanent" anchor="left">
        <List>
          <ListItem button component={Link} to="/">
            <ListItemText primary="Home" />
          </ListItem>
          <ListItem button component={Link} to="/404">
            <ListItemText primary="404" />
          </ListItem>
        </List>
      </Drawer>
  )
}
```

## The Solution:
To set the Active ListItem in the Material-UI Drawer, we can use the `selected` prop. To make this as clean as possible, we should make a custom ListItem. Here's what it looks like:  

```javascript{1-10}
  let CustomListItem = ({ to, primary }) => (
    <ListItem
      button
      component={Link}
      to={to}
      selected={to === location.pathname}
    >
      <ListItemText primary={primary} />
    </ListItem>
  )
```

Now we can render our CustomListItem as follows, which will automatically set the Drawer ActiveItem based on the browser's location.

```javascript{1}
<CustomListItem to="/" primary="Home Page" />
```

## Final Code
Here's how the Drawer looks in its final form:  

```javascript{1-31}
import React from "react"
import { Link } from "gatsby"
import { useLocation } from "@reach/router"
import Drawer from "@material-ui/core/Drawer"
import List from "@material-ui/core/List"
import ListItem from "@material-ui/core/ListItem"
import ListItemText from "@material-ui/core/ListItemText"

export default function BarebonesDrawer({ children }) {
  const location = useLocation()

  let CustomListItem = ({ to, primary }) => (
    <ListItem
      button
      component={Link}
      to={to}
      selected={to === location.pathname}
    >
      <ListItemText primary={primary} />
    </ListItem>
  )

  return (
      <Drawer variant="permanent" anchor="left">
        <List>
          <CustomListItem to="/" primary="Home Page" />
          <CustomListItem to="/404" primary="404 Page" />
        </List>
      </Drawer>
  )
}
```

## Finished Product

Link: https://codesandbox.io/s/github/SnappyWebDesign/Material-UI_Active_ListItem_Tutorial/tree/main/?file=/src/components/DrawerDemo.js
    
## Bonus: Styled Material-UI Drawer  
Need a quick copy and paste? Here's the code for the styled Drawer in the demo above:  
[View on Github](https://github.com/SnappyWebDesign/Material-UI_Active_ListItem_Tutorial/blob/main/src/components/DrawerDemo.js)

---

### Did you find this article helpful?  
If you did, would you take a second to share the article by clicking below? It helps our cause immensely!  

Make sure to also click the follow button to get notified when new posts go live 🔔