Next.js Discord

Discord Forum

APP Router | What would be the best practice for a NavBar ?

Unanswered
Ninhache posted this in #help-forum
Open in Discord
NinhacheOP
Hi, I'm currently working of something that needs a NavBar and I'm not confident to how I should do it :

I need a Navbar that change depend on the route, for example, if we're on the dashboard route, dashboard should be in bold

That's pretty simple if we don't mind about SSR

But If I do..
Should I create a component as ?
export function MainNav({
  className,
  ...props
}: React.HTMLAttributes<HTMLElement>) {
  return (
    <nav>
      <Link
        href="/"
        className="..."
      >
        <HoverIfRouteMatch href="/">
          Dashboard
        </Hover>
      </Link>
    </nav>
  )
}
~~~
~~~
"use client";

export function HoverIfRouteMatch(href: string) {
    useRouter()
    ...
}


As I already ask, should I do it like that ?
I mean, create a "component" just to render a "bold" text

2 Replies

American Crow
Yea something like:

layout.tsx
import NavbarLink from "@/app/(navbar-example)/_components/navbar-link"

export default function NavbarRootLayout({children}) {
   return (
      <>
         <div className="h-16 bg-gray flex gap-8">
            <NavbarLink href="/navbar-home">Home</NavbarLink>
            <NavbarLink href="/navbar-about">About</NavbarLink>
         </div>
         {children}
      </>
   )
}

navbar-link.tsx
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"

export default function NavbarLink({ href, children }) {
   const currentPath = usePathname()

   return (
      <Link
         href={href}
         className={`text-lg ${currentPath === href ? "underline font-bold" : ""}`}
      >
         {children}
      </Link>
   )
}


And two test pages/routes with dummy content, see scerenshot:
NinhacheOP
This confirms my idea, thanks