How to set an Active List Item Link 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:

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>
  )
}

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.

Head over to https://snappywebdesign.net/blog/how-to-set-active-list-item-link-material-ui/ to read the full story.