Back to Tutorials & Guides
· Updated on

Styling the Active Link with Next.js and Tailwind CSS

Preview of the header component with active links

Live Demo Download

This article answers one of the most common concerns from users of our Tailwind templates: how to highlight the active link in Next.js.

Next.js recommends using usePathname() to determine if a link is active. The official documentation provides an example, which we will complete with Tailwind CSS to style the active link.

'use client'
 
import { usePathname } from 'next/navigation'
import Link from 'next/link'
  
export function Links() {
  const pathname = usePathname()
  
  return (
    <nav>
      <ul>
        <li>
          <Link className={`inline-flex rounded-full px-3 py-1.5 text-slate-500 hover:text-indigo-500 [&.active]:bg-indigo-100 [&.active]:text-indigo-600 ${pathname === '/' ? 'active' : ''}`} href="/">
            Home
          </Link>
        </li>
        <li>
          <Link
            className={`inline-flex rounded-full px-3 py-1.5 text-slate-500 hover:text-indigo-500 [&.active]:bg-indigo-100 [&.active]:text-indigo-600 ${pathname === '/customers' ? 'active' : ''}`}
            href="/customers"
          >
            Customers
          </Link>
        </li>
        {/* ...more links... */}
      </ul>
    </nav>
  )
}

The [&.active]: prefix is a Tailwind arbitrary property that lets us define the style for an element when it has the active class. Here, the text turns text-blue-500 when the link is active.

Create a reusable NavLink component

Now, to make this easier, let’s create a reusable component that automatically handles the active link highlighting. Create a new file called nav-link.tsx in the folder where you usually place your UI components, and paste the following code:

'use client'

import { usePathname } from 'next/navigation'
import Link from 'next/link'

export default function NavLink({
  href,
  exact = false,
  children,
  className,
  ...props
}: {
  href: string
  exact?: boolean
  className?: string
  children: React.ReactNode
}) {
  const pathname = usePathname()
  const isActive = exact ? pathname === href : pathname.startsWith(href)
  const newClassName = isActive ? `${className} active` : className

  return (
    <Link href={href} className={newClassName} {...props}>
      {children}
    </Link>
  )
}

The <NavLink> component can be used just like a regular <Link> component in Next.js. The only difference is that this component can add the active class when the link is active.

How to use it

import NavLink from "@/components/nav-link";

export default function NavigationMenu() {
  return (
    <nav className="flex justify-center">
      <ul className="flex flex-wrap items-center gap-3 text-sm font-medium md:gap-8">
        <li>
          <NavLink
            href="/active-link"
            exact
            className="inline-flex rounded-full px-3 py-1.5 text-slate-500 hover:text-indigo-500 [&.active]:bg-indigo-100 [&.active]:text-indigo-600"
          >
            Home
          </NavLink>
        </li>
        <li>
          <NavLink
            href="/active-link/customers"
            className="inline-flex rounded-full px-3 py-1.5 text-slate-500 hover:text-indigo-500 [&.active]:bg-indigo-100 [&.active]:text-indigo-600"
          >
            Customers
          </NavLink>
        </li>
        {/* ...more links... */}
      </ul>
    </nav>
  );
}

With this solution, you have a clean and efficient way to highlight active links and make your navigation more intuitive.