Detecting the Active Folder in NextJS using useRouter

Recently, while working on an application, I came across having to determine the folder of the current URL and assign a class to the 'Active Link' in the Navbar to be styled differently from other links.

How did I achieve this?

In my Navbar component, I checked if the current pathname (URL) segment matches the Link's route, and if it matches, I add the Active class (activeClassName) to the Link.

import Link from 'next/link'
import { useRouter } from 'next/router'

const Navbar = () => {

  const router = useRouter();

  const appRoutes = [{route: "/dashboard", name: "Dashboard"}, {route: "/users", name: "Users" }]

return (

    { => (
      <Link key={link.route} href={link.route}>
            className={`linkClassName ${
              `/${router.pathname.split('/')[1]}` === link.route ? 'activeClassName' : '' }`}>


What is happening above:

The appRoutes is an array of the Routes Object({route: "", name: ""} ) for the Application.

In line 15, I checked if the first segment of the current URL matches the Link's directory. When it matches, it adds the 'activeClassName' to the Link component.

Where was this technique useful:

  • For Detail, Edit, and New pages inside of Folders.

Inspired by: