How To Add Styling To An Active Link In NextJS?

Last Updated : 06 Aug, 2024

Styling active links is important for enhancing user navigation by providing visual feedback on the current page or section. In Next.js, you can achieve this by using the Link component from next/link and applying styles conditionally based on the active route. In this article, we will learn about how to add styling to an active link in NextJS.

Approach

To add styling to an active link in nextJS, we are going to use a usePathname hook.

usePathname hook is a client component hook and it is used to get a current URL's pathname.
By using the ternary operator, we are comparing if the current pathname matches the specified pathname.
if it matches the specified pathname then, we are adding an active class name.

Syntax:

const pathname = usePathname()
<Link className={`${pathname === '/' ? 'active' : ''}`} href="/"> Home </Link>

Steps to Setup a NextJS App

Step 1: Create a NextJS application using the following command and answer a few questions.

npx create-next-app@latest app_name

Step 2: It will ask you some questions, so choose as the following.

√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router?  ... Yes
√ Would you like to customize the default import alias (@/*)? ... No

Step 3: After creating your project folder, move to it using the following command.

cd app_name

Project Structure:

active-link-structure

Example: The below example demonstrate the adding of an active link styling in NextJS

JavaScript

// File path: src/app/layout.js

"use client";
import { usePathname } from "next/navigation";
import Link from "next/link";
import "./globals.css";

export default function RootLayout({ children }) {
	const pathname = usePathname();
	return (
		<html lang="en">
			<body>
				<nav>
					<Link
						className={`${pathname === "/" ? "active" : ""}`}
						href="/"
					>
						Home
					</Link>

					<Link
						className={`${pathname === "/about" ? "active" : ""}`}
						href="/about"
					>
						About
					</Link>

					<Link
						className={`${pathname === "/contact" ? "active" : ""}`}
						href="/contact"
					>
						Contact
					</Link>
				</nav>
				{children}
			</body>
		</html>
	);
}

JavaScript

// File path: src/app/page.js

export default function Home() {
	return (
		<>
			<h1>Home Page</h1>
		</>
	);
}

JavaScript

//  File path: src/app/contact/page.js

export default function Page() {
	return (
		<>
			<h1>Contact Page</h1>
		</>
	);
}

JavaScript

// File path: src/app/about/page.js

export default function Page() {
	return (
		<>
			<h1>About Page</h1>
		</>
	);
}

Start your application using the command:

npm run dev

Output:

Styling active link in next js

Conclustion

Using the usePathname hook in Next.js to style active links provides a straightforward and efficient way to enhance navigation. Conditional styling with inline styles, CSS Modules, styled-components, or Tailwind CSS, can also be used to create a clear and engaging user experience.

How to Open a Link in a New Tab in NextJS?

jaimin78

Improve

Article Tags :

How To Add Styling To An Active Link In NextJS?

Approach

Steps to Setup a NextJS App

Project Structure:

Conclustion

Similar Reads

Thank You!

What kind of Experience do you want to share?