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:

<NavLink
  to="users"
  style={() => 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 style (or add an inactive style).

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.

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

Download

That went smoothly, check your email.

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

<NavLink
  to="users"
  style={(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 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:

<NavLink
  to="users"
  style={({ isActive }) => ({
    color: isActive ? '#fff' : '#545e6f',
    background: isActive ? '#7600dc' : '#f0f0f0',
  })}
>
  Users
</NavLink>

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:

<NavLink
  to="users"
  style={({ isActive }) =>
    isActive
      ? {
          color: '#fff',
          background: '#7600dc',
        }
      : { color: '#545e6f', background: '#f0f0f0' }
  }
>
  Users
</NavLink>

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!