How To Add Styling To An Active Link In NextJS? Last Updated : 06 Aug, 2024 Comments Improve Suggest changes Like Article Like Report 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 AppStep 1: Create a NextJS application using the following command and answer a few questions.npx create-next-app@latest app_nameStep 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 (@/*)? ... NoStep 3: After creating your project folder, move to it using the following command.cd app_nameProject 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 devOutput:ConclustionUsing 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. Comment More infoAdvertise with us Next Article How To Add Styling To An Active Link In NextJS? jaimin78 Follow Improve Article Tags : Web Technologies ReactJS Next.js Similar Reads How to Style an Active Link in VueJS ? In single-page applications effective navigation becomes crucial. In this article, we'll explore how to style active links in Vue.js using the popular routing library, Vue-router. Table of Content Using router-link-exact-active classConditional class bindingSteps to Setup the Project EnvironmentStep 4 min read How to Open a Link in a New Tab in NextJS? Opening a link in a new tab in Next.js consists of using either the target="_blank" attribute in an anchor (<a>) tag or using Next.js's Link component with the passHref prop to ensure proper handling of routing while opening the link in a new tab. In this article, we will explore both these ap 3 min read How To Add Navbar To All Pages In NextJS ? A navbar is a common UI element used to navigate between different sections or pages of a website. Adding a navbar to all pages ensures consistent navigation across the site. This article will explore how we can add a navbar to all pages In NextJS. Output Preview: Prerequisites:NextJSReactJSReact Ho 3 min read Styling Active Router Link in Angular Styling the active router link in angular allows the user to differentiate between the active router link and inactive router links. Angular provides a special mechanism to work with active router links. Approach: Create the Angular app to be used.Create the header component that contains the navi 2 min read How to Add Stylesheet in Next.js ? In Next.js, adding a stylesheet enhances your app's styling capabilities. Import CSS files directly in your components or pages using ES6 import syntax. Next.js optimizes and includes these styles in the build process, ensuring efficient and modular CSS management.In this post, we are going to learn 4 min read How to Style Links in CSS ? Styling links in CSS is one of the fundamentals in web design that helps in creating an interactive and pleasant user experience through navigation. Links are core components for web pages, and using CSS, you can easily come up with the kind of look you want in terms of the overall appearance of the 7 min read How to add Slider in Next.js ? Adding a slider in Next.js involves integrating a slider component, like react-range, managing its state using React hooks and applying styles for customization, enhancing user interaction and input precision in your application.ApproachTo add our Slider we are going to use the react-range package. 2 min read How to Create a Sidebar in NextJS & Tailwind CSS? In web development, sidebars are commonly used to organize navigation elements and provide quick access to different sections of a website. A sidebar is a vertical menu or panel that is typically positioned on the left or right side of the main content area. Prerequisites:Next.jsTailwindJavaScriptSt 5 min read How To Scroll To An HTML Element In NextJS? NextJS has various features that enable smooth scrolling to HTML elements. One method involves using useRef to create a reference to the target element and scrollIntoView to achieve smooth scrolling. Another method, using useEffect and window.scrollBy, sets up an event listener on a button for smoot 3 min read How To Handle Loading Between Page Changes in NextJS? To experience smooth transitions between the pages of your Next.js application, you can include a loading indicator that shows the progress of the page being loaded. This can be done by creating a custom spinner component and using it during page transitions. In this article, we will create a custom 4 min read Like