React Navbar Highlight Current Page with NavLink

A navigation bar is very important for every web or app. It helps the user to find the different pages of the website easily. The navbar is a mandatory thing for a better user experience.

The Problem:

Think you have created a beautiful navigation menu on your website. As a result, the user can easily explore the different pages of your site. But when the user goes to a page from the navigation menu, the navbar doesn’t highlight the page the user is on.

Now, if the user is not able to easily understand which page he/she is on, then it will be difficult for the user to understand the page structure of your website. In some cases, the user may confused due to not highlighting the current page.

As a result, your user experience will be bad. And that will cause a loss in overall business.

The Solution:

The solution to this problem is quite straightforward. Just add highlighting functionality to your Navbar. So that the user can easily understand which page or section he is in at the moment.

With React Router’s NavLink you can easily highlight the current page in the Navbar.

Just use the <NavLink> instead of the <a> tag in your Navbar. <NavLink> will track which page the user is on in the Navbar. and will apply active CSS class to the current menu item.

For example: Write <NavLink to="/about">About</NavLink> in the navigation menu instead of <a href="/about">About</a>. NavLink will automatically define a CSS class named Active on your current page.

Now just set the style properties for the .active class in your CSS file and you’re done.

Let’s see the step-by-step tutorial in detail below.

Highlight the Current Page in the Navbar with NavLink

Step 1: Install React Router

To use NavLink you must first install React Router. To install it, open a terminal in your project folder and execute the following command:

npm i react-router-dom

The above code will add React Router’s dependencies to your project.

Step 2: Setup the React Router

Before we begin, let’s take a look at our project structure. It will help you to understand.

Here we are working on a React project with Vite. And main.jsx is the main entry point of the application.

Now to set up React Router first we need to import BrowserRouter in our main.jsx file.

Your application entry point will be main.jsx if you use Vite or index.js if you use CRA.

Whatever it is, you just need to import BrowserRouter into the entry point of your web app. To do this, see the following code:

import { BrowserRouter } from "react-router-dom"

This code is added to the main.jsx file as per my project structure.

Now we need to wrap the entire App.jsx component with BrowserRouter.

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
)

By wrapping the entire App component, all routes in your web application will be handled by React Router.

Step 3: Creating the NavBar Component

Now let’s create a NavBar component. There will be three options Home, About, and Blog.

import { NavLink } from "react-router-dom"

function NavBar() {

    return <nav className="nav">
        <ul>
            <li>
                <NavLink to="/">Home</NavLink>
            </li>
            <li>
                <NavLink to="/about">About</NavLink>
            </li>
            <li>
                <NavLink to="/blog">Blog</NavLink>
            </li>
        </ul>
    </nav>

}

export default NavBar

Here first we import NavLink from React Router. This NavLink will help us highlight the current page.

Second, we created a NavBar component. There are simple three options.

If you notice here, you will see that the <a> tag is used as a link to create the traditional navigation bar. But here we have used React Router’s <NavLink> tag.

The to attribute is used instead of the href attribute within the NavLink tag.

Step 4: Creating the Pages for Navigation Menu

As you can see in the above code, three options are kept in the navigation menu. respectively: Home, About, and Blog. Now three pages have to be created for these three options.

Page means component. Everything in React is used as a component.

Let’s create components named Home.jsx, About.jsx and Blog.jsx.

These components will be considered as pages. You define your own logic inside this component. For now, for the sake of this tutorial, I’m just returning a simple <h1> tag.

function Home() {
    return <h1>Home</h1>
}

export default Home

Home.jsx

function About() {
    return <h1>About</h1>
}

export default About

About.jsx

function Blog() {
    return <h1>Blog</h1>
}

export default Blog

Blog.jsx

Step 5: Connect All of These to the App Component

import { Route, Routes } from "react-router-dom";
import NavBar from "./components/NavBar";
import Home from "./components/pages/Home";
import About from "./components/pages/About";
import Blog from "./components/pages/Blog";

function App() {
  return <div>

    <NavBar /> 

    <div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/blog" element={<Blog />} />
      </Routes>
    </div>

  </div>

}

export default App

In the code above we first import Route and Routes from React Router. This will help us to handle all the routing.

After that, the required NavBar and Page components are imported.

Then I defined my App component and declared Routes in it.

Notice that the <Route> tag contains the path attribute to specify the browser’s URL path. The page component is called by the element attribute. which will be rendered in the browser’s <body> tag.

Final Step: Adding Styles in CSS File

All our steps are finished, now we just need to add some styles.

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.nav {
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1rem;
}

.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
}

.nav a {
    text-decoration: none;
}

nav ul li a:not(.active) {
    color: red;
}

/*This .active will highlight the current page we are on*/
.active {
    font-weight: bold;
    color: white;
}

At the end of the above CSS code, the .active class will control the design of the highlighted option in the navigation bar.

Here the highlighted font is told to be bold and the color will be white. You can design as you wish. Define any CSS property in this ‘active‘ class and design it yourself.

Make sure you import the CSS file into the main entry component of your application.

Now save everything. Start your dev server. Visit your application in the browser.

Conclusion

You already know the importance of highlighting the current page in navigation. Now you know how to highlight the current page in React.

So now start working on your project. And practice this a couple of times. You will understand everything. If you have something to share, you can write in the comment box below.

Reroce: Full source code on GitHub.