DEV Community

Cover image for How to style the Active Drawer ListItem in Material-UI
Snappy Web Design
Snappy Web Design

Posted on • Originally published at snappywebdesign.net

How to style the Active Drawer ListItem in Material-UI

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

Codesandbox Demo

Github Repo

Preview:

Screenshot 2021-08-03 155528

Boilerplate (Starting Point)

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

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:

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

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

<CustomListItem to="/" primary="Home Page" />
Enter fullscreen mode Exit fullscreen mode

Final Code

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

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

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


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 πŸ””

Discussion (0)