How to set an Active List Item Link Material UI
1 min readAug 6, 2021
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
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.