Next.js Discord

Discord Forum

I get this error when trying to use NavigationMenu from Shadcn in my project(continued in replies)

Answered
Broken Nokia posted this in #help-forum
Open in Discord
Original message was deleted.
Answered by Broken Nokia
the whole thing was becuase of a syntax (skill) issue
View full answer

25 Replies

Avatar
Broken Nokia
import {
    NavigationMenu,
    NavigationMenuContent,
    NavigationMenuIndicator,
    NavigationMenuItem,
    NavigationMenuLink,
    NavigationMenuList,
    NavigationMenuTrigger,
    navigationMenuTriggerStyle,
    NavigationMenuViewport,
} from "@/components/ui/navigation-menu";
import Link from "next/link";

export default function Home() {
    return (
        <div>
            <NavigationMenuItem>
                <Link href="#" legacyBehavior passHref>
                    <NavigationMenuLink
                        className={navigationMenuTriggerStyle()}
                    >
                        Documentation
                    </NavigationMenuLink>
                </Link>
            </NavigationMenuItem>
        </div>
    );
}
this was the code initially, after a reddit user suggest using the 'use client' directive at the top, i still got an error:
Image
Avatar
Clown
That might be because of not having a "use client" at top
Ah u fixed that
Avatar
Broken Nokia
right
Avatar
Clown
Where is the <NavigationMenu>?
Avatar
Broken Nokia
i think i figured out where i went wrong
yes thats the issue 😓
i just got the code to work
Avatar
Clown
:sunglasses_1:
Avatar
Broken Nokia
could you please explain how the use client directive changed things?
Avatar
Clown
The navigation menu might be using context or something. I haven't used that from shadcn
Avatar
Broken Nokia
never mind i tried it without use client and it still worked
Avatar
Broken Nokia
the whole thing was becuase of a syntax (skill) issue
Answer
Avatar
Clown
Yeah i guess NavigationMenu takes care of the context provider abstraction and everything idk
I havent used that nav menu
Avatar
Broken Nokia
i see
Avatar
Clown
But since its fixed. Mark the answer as resolved
Avatar
Broken Nokia
well thank you anyways, this has been bothering me for a few days now
will do
i hit close post, do i need to do anything else
how do i mark as resolved 🥹 🔫
Avatar
Clown
Here you go
Avatar
Broken Nokia
thank you