How to set an Active List Item Link Material UI

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:

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

--

--

--

Freelance web designer and operator of Snappy Web Design https://snappywebdesign.net/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

17 Life-Saving JavaScript One-Liners 🔥

Teaching programming: why it’s hard to get right, but incredibly rewarding

Angular micro-frontend architecture. Part 1/3 — The concept of micro-frontend architecture.

Create react app error - error An unexpected error occurred: yarn.cmd

Rendering Namespace Attributes Like xmlns:inkscape In React

Composi/core — A Library for Functional Components with Redux-like State Management.

Mocking HTTP Payloads in Hapi.js

Creating Spotify from Scratch using Redux — An Explanation of Playback Capability in React Redux

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Snappy Web Design

Snappy Web Design

Freelance web designer and operator of Snappy Web Design https://snappywebdesign.net/

More from Medium

How to test the npm package without publishing?

Why choose AngularJS for web development?

Top Frontend Frameworks For You To Use Today

Got an Error code EDNS or syscall queryA from MailTrap, HERE THE SOLUTION !