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:


Edwards Moses - Web & Mobile — React & React Native Consultant

Edwards Moses
Web & Mobile — React & React Native Consultant

I'm Edwards, based in Lagos, Nigeria.
Freelancer Software Developer — collaborating with teams to craft extraordinary products.

From conception through to completion, I find immense joy in witnessing the evolution of an idea into a fully realized product in the hands of users. Check out my projects and articles to see what I've been up to lately.

Ready to bring your ideas to life?