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.

Practice

1. What is the main purpose of active link detection in a Next.js navigation menu?

easy

A. To highlight the link of the current page the user is on

B. To preload all pages linked in the menu

C. To disable links that are not active

D. To change the URL path automatically

Solution

1. Step 1: Understand active link detection

   Active link detection is used to show which page is currently open by highlighting its link in the navigation.

2. Step 2: Identify the purpose in Next.js navigation

   Highlighting the current page link helps users know where they are in the site.

3. Final Answer:

   To highlight the link of the current page the user is on -> Option A

4. Quick Check:

   Active link detection = Highlight current page link [OK]

Hint: Active link detection means showing current page link highlighted [OK]

Common Mistakes:

• Thinking it disables other links
• Confusing with preloading pages
• Assuming it changes the URL automatically

2. Which Next.js hook is used to get the current URL path for active link detection?

easy

A. useRouter()

B. useHref()

C. usePathname()

D. useLocation()

Solution

1. Step 1: Recall Next.js hooks for routing

   Next.js provides usePathname() to get the current URL path in the app router.

2. Step 2: Differentiate from other hooks

   useRouter() is more general, but usePathname() specifically returns the current path string.

3. Final Answer:

   usePathname() -> Option C

4. Quick Check:

   Current path hook = usePathname() [OK]

Hint: Use usePathname() to get current URL path in Next.js [OK]

Common Mistakes:

• Using useRouter() instead of usePathname()
• Confusing with React Router hooks
• Using non-existent hooks like useHref()

3. Given this Next.js component snippet, what will be the value of isActive if the current path is /about?

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

medium

A. false

B. null

C. undefined

D. true

Solution

1. Step 1: Understand the usePathname() output

   usePathname() returns the current URL path as a string, here '/about'.

2. Step 2: Evaluate the comparison

   Comparing pathname === '/about' when pathname is '/about' results in true.

3. Final Answer:

   true -> Option D

4. Quick Check:

   Pathname '/about' === '/about' is true [OK]

Hint: Compare pathname string directly to link href for active check [OK]

Common Mistakes:

• Assuming usePathname() returns an object
• Using == instead of === causing confusion
• Expecting false when paths match exactly

4. Identify the error in this Next.js active link detection code:

const pathname = usePathname;
const isActive = pathname === '/home';

medium

A. pathname should be imported from 'next/link'

B. usePathname is not called as a function

C. Comparison operator should be != instead of ===

D. isActive should be a state variable

Solution

1. Step 1: Check usePathname usage

   usePathname is a hook and must be called as a function: usePathname()

2. Step 2: Identify the error in assignment

   Assigning usePathname without parentheses assigns the function itself, not the path string.

3. Final Answer:

   usePathname is not called as a function -> Option B

4. Quick Check:

   Hooks must be called: usePathname() [OK]

Hint: Always call hooks with () to get their value [OK]

Common Mistakes:

• Forgetting parentheses on hooks
• Using wrong comparison operators
• Importing pathname from wrong module

5. How would you correctly add an aria-current attribute to a Next.js navigation link when it is active using usePathname()? Choose the best code snippet.

hard

A. const pathname = usePathname();
return <a href='/about' aria-current={pathname === '/about' ? 'page' : undefined}>About</a>;

B. const pathname = usePathname();
return <a href='/about' aria-current={pathname === '/about' ? true : false}>About</a>;

C. const pathname = usePathname();
return <a href='/about' aria-current={pathname === '/about' ? 'true' : 'false'}>About</a>;

D. const pathname = usePathname();
return <a href='/about' aria-current={pathname === '/about' ? 'current' : ''}>About</a>;

Solution

1. Step 1: Understand aria-current usage

   aria-current should be set to 'page' when the link is active, otherwise omitted or undefined.

2. Step 2: Check each option's attribute value

   const pathname = usePathname();
   return <a href='/about' aria-current={pathname === '/about' ? 'page' : undefined}>About</a>;

   correctly uses 'page' for active and undefined for inactive, which is the recommended pattern.

3. Final Answer:

   Option A code snippet -> Option A

4. Quick Check:

   aria-current='page' when active, undefined otherwise [OK]

Hint: Use aria-current='page' only when link matches current path [OK]

Common Mistakes:

• Using boolean true/false instead of 'page'
• Using string 'true' or 'false' incorrectly
• Setting aria-current to wrong string values