How to make active link in Next Js navbar

Hello Developers! Are you looking to create an engaging and user-friendly navigation bar for your Next.js project? One crucial aspect of a navbar is highlighting the active link to provide a clear indication of the user’s current location within the website’s structure. In this article, we will explore how to make an active link in a Next.js navbar using both pure CSS and Tailwind CSS, allowing you to choose the approach that best suits your preferences and project requirements.

In order to implement active links in the navbar, we’ll be leveraging the powerful useRouter hook provided by Next.js. This hook gives us access to the Router object and its properties, enabling us to retrieve essential information about the current route within a functional component. By utilizing this hook, we can easily access details such as the current URL, query parameters, and route parameters without the need for prop drilling or complex state management.

Let’s get started with the implementation. Assuming you have a navbar component in your Next.js project, the first step is to import the Link component from Next.js and the useRouter hook:

import Link from "next/link";
import { useRouter } from "next/router";

Next, within your navbar component, initialize the useRouter hook:

export default function Navbar() {
  const router = useRouter();
  const currentRoute = router.pathname;

  // Rest of the navbar component
}

By accessing router.pathname, we can obtain the current URL, which will help us determine the active link.

Now, let’s move on to applying the active link styles using either pure CSS or Tailwind CSS, depending on your preference and project setup.

Pure CSS | Next.js

If you prefer using pure CSS, you can apply the following approach:

<Link href="/portfolio"
  style={{
    fontSize: "16px",
    color: currentRoute === "/portfolio" ? "red" : "#444",
  }}
>
  Portfolio
</Link>

In this example, we set the font size using a static value of “16px”, but you can adjust it according to your design requirements. The crucial part is the color property, where we use a ternary operator to check if the currentRoute matches the link’s path. If they match, we apply the “red” color; otherwise, we use a neutral “#444” color.

Tailwind CSS

On the other hand, if you prefer working with Tailwind CSS, you can utilize the class-based approach:

<Link href="/portfolio"
  className={
    "text-base" +
    (currentRoute === "/portfolio" ? " text-red-500" : " text-gray-500")
  }
>
  Portfolio
</Link>

Here, we provide the base class of “text-base” for consistent styling across all links. Using the ternary operator, we append the appropriate class name to change the text color based on the currentRoute. If it matches, we apply the “text-red-500” class; otherwise, we use the “text-gray-500” class.

By incorporating these code snippets into your navbar component, you can now create an active link that stands out and helps users navigate your Next.js website with ease.

In conclusion, implementing active links in your Next.js navbar is a simple yet effective way to enhance the user experience and provide clear navigation cues. Whether you choose to use pure CSS or leverage the power of Tailwind CSS, the process remains straightforward and accessible.

We hope this article has provided you with valuable insights and practical examples for creating active links in your Next.js navbar. By utilizing the useRouter hook and applying the appropriate styles, you can guide users through your website seamlessly, improving their overall satisfaction and engagement.

Thank you for reading, and happy coding!