Shadcn Menu + React Router DOM

App.tsx

import { Card } from '@/components/ui/card';
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from '@/components/ui/navigation-menu';

import { Outlet, RouterProvider } from 'react-router';
import { NavLink, createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Navigator />,
    children: [
      {
        index: true,
        element: <Account />,
      },
      {
        path: 'password',
        element: <Password />,
        children: [
          {
            path: 'reset',
            element: <div>Reset password</div>,
          },
        ],
      },
    ],
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

function Navigator() {
  return (
    <div className="flex flex-col space-y-3">
      <NavigationMenu>
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavLink
              to="/"
              className={({ isActive }) => {
                return isActive ? 'text-red-400' : 'text-black';
              }}
            >
              <NavigationMenuLink>Account</NavigationMenuLink>
            </NavLink>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Security</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="p-4 md:w-[400px] lg:w-[500px] flex flex-col space-y-2">
                <NavLink
                  to="/password"
                  className={({ isActive }) => {
                    return isActive ? 'text-red-400' : 'text-black';
                  }}
                >
                  <NavigationMenuLink>Password</NavigationMenuLink>
                </NavLink>
                <NavLink
                  to="/password/reset"
                  className={({ isActive }) => {
                    return isActive ? 'text-red-400' : 'text-black';
                  }}
                >
                  <NavigationMenuLink>Reset</NavigationMenuLink>
                </NavLink>
              </ul>
            </NavigationMenuContent>
            {/* <NavLink
              to="/password"
              className={({ isActive }) => {
                return isActive ? 'text-red-400' : 'text-black';
              }}
            >
              <NavigationMenuLink>Password</NavigationMenuLink>
            </NavLink> */}
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavLink
              to="/password/reset"
              className={({ isActive }) => {
                return isActive ? 'text-red-400' : 'text-black';
              }}
            >
              <NavigationMenuLink>Reset </NavigationMenuLink>
            </NavLink>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
      <Outlet />
    </div>
  );
}

function Account() {
  return (
    <Card>
      <h1>Account</h1>
    </Card>
  );
}

function Password() {
  return (
    <Card>
      <h1>Password</h1>
    </Card>
  );
}

export default App;