Next.js Discord

Discord Forum

How to make Active Links on color on navigation Next-intl

West African Lion posted this in #help-forum
Open in Discord
West African LionOP
Hi guys, how im supoosed to make active link when navigating on my app. Ive tried the usual way to do it, but with next-intl, not all pathnames are the same depending on the language.

export default function Navigation() {
  const params = useParams();
  const pathname = usePathname();

  const currentLocale = params.locale as "en" | "es" | "ar" | "fr";

  const activeLinkClass = (internalPath: keyof typeof pathname) => {
    const fullPath = getPathname({ href: internalPath, locale: currentLocale });
    return pathname === fullPath ? "text-gold" : "text-current";
  return (
      <div className=" h-32 w-full flex lg:bg-white justify-between lg:justify-around bg-black lg:pr-12 overflow-y-hidden">
        <div className="w-full h-full hidden lg:flex justify-evenly">
          <div className="flex items-center w-5/12">
            <div className="flex  text-xl w-full justify-evenly font-light">
              <Link href="/">
                <span className={activeLinkClass(formattedPath)}>Home</span>
              <Link href={`/${params.locale}/services`}>
                <span className={activeLinkClass(formattedPath)}>Services</span>

0 Replies