Active link detection in NextJS

Introduction

Active link detection helps users know which page they are on by highlighting the current link in navigation. It improves website usability and navigation clarity.

When building a navigation menu to show the current page visually.

When you want to style links differently based on the page the user is visiting.

When creating breadcrumbs or sidebar menus that reflect the active section.

When you want to improve accessibility by indicating the active page.

When building multi-page apps with Next.js routing.

Syntax

NextJS

'use client';
import { usePathname } from 'next/navigation';
import Link from 'next/link';

function NavLink({ href, children }) {
  const pathname = usePathname();
  const isActive = pathname === href;

  return (
    <Link 
      href={href} 
      className={isActive ? 'active' : ''}
      aria-current={isActive ? 'page' : undefined}
    >
      {children}
    </Link>
  );
}

Use usePathname() from next/navigation to get the current URL path.

Compare the current path with the link's href to determine if it is active.

Examples

Check if the current path is exactly '/about'.

NextJS

const pathname = usePathname();
const isActive = pathname === '/about';

Apply the 'active' class to the link if it matches the current path.

NextJS

<Link href="/contact" className={isActive ? 'active' : ''}>Contact</Link>

Use aria-current attribute for accessibility to indicate the active link.

NextJS

aria-current={isActive ? 'page' : undefined}

Sample Program

This component shows a simple navigation bar with three links. The link matching the current page path is styled differently with bold blue text and an underline. The aria-current attribute helps screen readers know which page is active.

NextJS

'use client';
import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function Navbar() {
  const pathname = usePathname();

  function NavLink({ href, children }) {
    const isActive = pathname === href;
    return (
      <Link 
        href={href} 
        className={isActive ? 'active' : ''}
        aria-current={isActive ? 'page' : undefined}
      >
        {children}
      </Link>
    );
  }

  return (
    <nav aria-label="Main navigation">
      <ul style={{ display: 'flex', gap: '1rem', listStyle: 'none' }}>
        <li><NavLink href="/">Home</NavLink></li>
        <li><NavLink href="/about">About</NavLink></li>
        <li><NavLink href="/contact">Contact</NavLink></li>
      </ul>
      <style>{`
        a {
          text-decoration: none;
          color: black;
          font-weight: normal;
        }
        a.active {
          font-weight: bold;
          color: blue;
          border-bottom: 2px solid blue;
        }
      `}</style>
    </nav>
  );
}

Important Notes

Make sure to use usePathname() inside client components only.

For nested routes, you might want to check if the current path starts with the link href instead of exact match.

Always include aria-current="page" on active links for better accessibility.

Summary

Active link detection highlights the current page link in navigation.

Use usePathname() from Next.js to get the current URL path.

Compare the path with link href and apply styles and aria-current accordingly.