How to set an Active List Item Link Material UI

Learn how to style and set the active link in this Material-UI Tutorial

Profile Pic of Snappy Web Design

Aug 6 · 4 min read

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:

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

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

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" />

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

Finished Product

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 🔔

Hire me

Most popular posts

1.

How to Code a Dark Theme with Material UI

2.

Gatsby Code Splitting

3.

Michigan Website Design

For Developers

1.

How to make a Font Size Slider in React with Material UI

2.

How to Add Structured Data to Blog Posts in Gatsby

3.

How to Add Breadcrumbs to Google Search in Gatsby

For Business Owners

1.

What the heck is Gatsby js and why use it

2.

10 Landing Page Designs to Inspire Your Small Business

3.

About Google Page Speed Scores and Why They Matter

More from Snappy Web Design

Subscribe to the Snappy Web Design Blog to get notified when a new post goes live. We'll never share your e-mail address or use it for any reason other than to share new posts.

Published September 1

Snappy Web Design is the one-stop-shop for web design.

Michigan's Newest Web Design Company

You search Google for “Michigan web design” and find my site. I’m Joe, and I’m the head developer at Snappy Web Design. I’m the new guy on the block, and an expert in providing full-service web design for small business owners in MI.

I’m different from typical web design agencies because I aim to be your partner for all things related to your onli...


Published August 6

You’ve heard of WordPress, Squarespace, and Wix...but what the heck is Gatsby.js?

You’re hiring a freelancer or agency to build your company's website and considering your options - WordPress, Squarespace, Wix - and then, someone mentions Gatsby.js. You learn that it’s used by many of the largest companies across the globe - but you’ve never heard of it, and don’t know what to think. This is the position that 95% of our new clients find themselves in and it’s understandable. Technology evolves fast and it can be hard to keep up. However, if you’re hiring an agency to build...


Copyright © 2021. Snappy Web Design. All rights reserved.