javascript - Highlight the active nav item on click using Tailwind CSS in React - Stack Overflow

I have a navigation bar like this:

<nav className="bg-white shadow dark:bg-gray-800">
<div className="container flex items-center justify-center p-6 mx-auto text-gray-600 capitalize dark:text-gray-300">
        <Link
                to="/home"
                className="text-gray-800 transition-colors duration-300 transform dark:text-gray-200 border-b-2 border-blue-500 mx-1.5 sm:mx-6"
        >
                home
        </Link>

        <Link
                to="/invoices"
                className="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-300 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6"
        >
                features
        </Link>

        <Link
        
                to="/forms"
                className="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-300 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6"
        >
                forms
        </Link>

        <Link
                to="/newForm"
                className="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-300 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6"
        >
                form2
        </Link>
</nav>

I want to change the nav item when it's clicked, but everywhere in Stackoverflow that I've searched I only found solutions for NestJS, Next.js, etc., not React.

I have a navigation bar like this:

<nav className="bg-white shadow dark:bg-gray-800">
<div className="container flex items-center justify-center p-6 mx-auto text-gray-600 capitalize dark:text-gray-300">
        <Link
                to="/home"
                className="text-gray-800 transition-colors duration-300 transform dark:text-gray-200 border-b-2 border-blue-500 mx-1.5 sm:mx-6"
        >
                home
        </Link>

        <Link
                to="/invoices"
                className="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-300 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6"
        >
                features
        </Link>

        <Link
        
                to="/forms"
                className="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-300 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6"
        >
                forms
        </Link>

        <Link
                to="/newForm"
                className="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-300 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6"
        >
                form2
        </Link>
</nav>

I want to change the nav item when it's clicked, but everywhere in Stackoverflow that I've searched I only found solutions for NestJS, Next.js, etc., not React.

• javascript
• reactjs
• typescript
• navbar
• tailwind-css

Share Improve this question Follow edited Sep 12, 2022 at 15:06 Ed Lucas 7,36544 gold badges4040 silver badges5050 bronze badges asked Sep 10, 2022 at 7:42 MhmdnzrMhmdnzr 14311 gold badge33 silver badges1515 bronze badges 3

• Change the navItem ? style or content? Check this out: stackoverflow./questions/70342961/… – debugger Commented Sep 10, 2022 at 7:45
• If you want to style your nav item when It's active and If you're using React-router-dom. Here is a doc reference use NavLink: reactrouter./en/v6.3.0/api#navlink Or If you want to style the nav link on click then use the active variant from tailwindCSS : tailwindcss./docs/hover-focus-and-other-states – Muhammad Shahzad Ali Commented Sep 10, 2022 at 7:55
• What is Link? Please edit post to include a more plete and prehensive minimal reproducible example so we've better context over the code and what it's capable of. If you are using react-router-dom then I would suggest using the NavLink ponent as it handles the active link and styling for you. – Drew Reese Commented Sep 10, 2022 at 8:32

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

The NavLink ponent automatically receives an "active" class by default when it's considered active, allowing you to apply CSS for styling purposes. So, in your index.css file, add:

@tailwind base;
@tailwind ponents;
@tailwind utilities;

.active{
    /* Add whatever CSS style will make your link look active. The example below (in my case) */
    @apply block py-2 pl-3 pr-4 text-white bg-orange-700 rounded md:bg-transparent md:text-orange-700 md:p-0 underline;
}

Thats it. Hopefully, this helps!

You should use active variant on className in tailwindCSS.
for example:

<Link
    to="/home"
    className="text-gray-300 active:text-blue-500"
>
    home
</Link>

You really need to define how you want to determine whether the class is added or not first.

Seems to me you'd want to instead loop through your items:

const isCurrentPage = (href: string) => {
   // return true if `href` is the current path, many ways you could do this
}

// loop through your items and conditionally add the class if active...
['/home', '/invoices', '/forms'].map(href => <Link key={href} href={href} className={isCurrentPage(href) ? 'active' : ''} />

Your isCurrentPage function depends on your app logic and setup; you could probably rely on some logic like window.location.pathname.indexOf(href) === 0 to start.