React Icon Get 67% off the React Master Bundle!

See the bundle then add to cart and your discount is applied.

0 days
00 hours
00 mins
00 secs
React-router

Active NavLink Classes with React Router

React Router provides the <NavLink> element for us to declaratively navigate around our applications, it renders an <a href=""> for us that points to a route. So, how do we add an active class using React Router when that <NavLink> is active?

✨ Written for React Router v6, check out my brand new React Router v6 course to fully master it.

Thankfully adding an active class in React Router v6 proves nice and simple once we dive in. Our <NavLink> component provides an isActive property that contains a boolean value, which is exposed to us through the className attribute when we pass in a function.

📣 You can also add active inline styles with React Router, the approach is similar so check it out!

From here we can an active class, or multiple classes, based on the isActive value. We can also supply inactive classes for when the link is not active, perhaps to remove styles.

🚀 The “inactive” class feature was added into <NavLink> during React Router v6’s beta phase and shipped with the v6.0.0 stable release.

Let’s take a basic <NavLink> which intends to navigate us to /users when clicked:

<NavLink to="users">Users</NavLink>

To add an active class, we can use the className attribute and pass in a function:

<NavLink
  to="users"
  className={() => console.log('I am called every route change...')}
>
  Users
</NavLink>

This function gets invoked on every route change, which makes it the perfect place to add an active class (or add an inactive state).

When supplying a function, we’re given an object through the function arguments that contains an isActive property:

<NavLink
  to="users"
  className={(state) => console.log(state)} // { isActive: true }
>
  Users
</NavLink>

Presumably it’s an object in case further properties are introduced down the line.

With this in mind, we can first destructure the isActive value to clean things up and secondly declare the active class for our <NavLink> in React Router as a string:

<NavLink
  to="users"
  className={({ isActive }) => (isActive ? 'active' : 'inactive')}
>
  Users
</NavLink>

Yep, it’s that simple! If the <NavLink> is active our 'active' string is returned, otherwise it’ll fall back to 'inactive'. You can call these classes whatever you like, and add as many as you like.

Check out the StackBlitz demo to see the React Router active classes on our <NavLink> in action:

What’s more, this approach is also fantastic as it supports multiple classes (I’m looking at you, Tailwind CSS):

<NavLink
  to="users"
  className={({ isActive }) =>
    isActive ? 'bg-green-500 font-bold' : 'bg-red-500 font-thin'
  }
>
  Users
</NavLink>

Nice and clean! And that’s pretty much all there is to it.

💯 If you are serious about your React skills, your next step is to take a look at my React courses where you’ll learn React, React Router, Styling and CSS practices, advanced concepts and APIs as well as server-side rendering and much more.

Happy routing!

Related blogs 🚀

Free eBooks:

JavaScript Array Methods eBook Cover

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

NestJS Build a RESTful CRUD API eBook Cover

Build your first NestJS app. With the CLI you'll learn the basics of real-world NestJS development.