diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
index 3ac53f1ef7aa..84413787393f 100644
--- a/src/components/Navigation/Navigation.jsx
+++ b/src/components/Navigation/Navigation.jsx
@@ -212,12 +212,13 @@ function Navigation({ links, pathname, hash = '', toggleSidebar }) {
                   {link.children.map((child) => {
                     const classNames =
                       'text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white';
+                    const isActive = location.pathname.startsWith(child.url);
                     return (
                       <NavLink
                         key={child.url}
                         to={child.url}
                         title={child.title}
-                        className={({ isActive }) =>
+                        className={() =>
                           isActive
                             ? `!text-black dark:!text-white ${classNames}`
                             : classNames