React Icon Get 73% 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

Write React like a pro. React Icon

Follow the ultimate React roadmap.

Active Inline NavLink Styles 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 inline style 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 inline style 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 classes with React Router, the approach is similar so check it out!

From here we can an active inline style, or multiple styles, based on the isActive value. We can also supply inactive classes for when the link is not active, perhaps to remove styles. There are a few approaches for this, so let’s dive in!

🚀 The “inactive” style 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 inline style, we can use the style attribute and pass in a function:

  style={() => console.log('I am called every route change...')}

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

Angular Directives In-Depth eBook Cover

Free eBook

Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs haven’t grasped every concept in this eBook.

  • Green Tick Icon Observables and Async Pipe
  • Green Tick Icon Identity Checking and Performance
  • Green Tick Icon Web Components <ng-template> syntax
  • Green Tick Icon <ng-container> and Observable Composition
  • Green Tick Icon Advanced Rendering Patterns
  • Green Tick Icon Setters and Getters for Styles and Class Bindings

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

  style={(state) => console.log(state)} // { isActive: true }

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 style for our <NavLink> in React Router as an object.

There are two approaches you can use for this, supplying separate objects or supplying one object and toggling the value based on the isActive property:

  style={({ isActive }) => ({
    color: isActive ? '#fff' : '#545e6f',
    background: isActive ? '#7600dc' : '#f0f0f0',

Yep, it’s that simple! If the <NavLink> is active our color: '#fff' and background: '#7600dc' styles are applied, otherwise it’ll fall back to '#545e6f' and '#f0f0f0' rules.

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

This approach is nice for simple styles, however they may be a better way that keeps things clean for more complex rules by using two separate objects (one for active, one for inactive) and using the isActive property to conditionally switch objects:

  style={({ isActive }) =>
      ? {
          color: '#fff',
          background: '#7600dc',
      : { color: '#545e6f', background: '#f0f0f0' }

To be honest, this approach is probably nicer, as you could add a specific style for either object and not have to “undo” the style on the other object by setting it to an empty string.

StackBlitz demo demonstrating this approach and adding styles to React Router’s <NavLink> with multiple objects:

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 styling!

Learn React the right way.

The most complete guide to learning React ever built.
Trusted by 82,951 students.

Todd Motto

with Todd Motto

Google Developer Expert icon Google Developer Expert

Related blogs 🚀

Free eBooks:

Angular Directives In-Depth eBook Cover

JavaScript Array Methods eBook Cover

NestJS Build a RESTful CRUD API eBook Cover