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
Original message was deleted.
25 Replies
![Avatar](https://cdn.discordapp.com/avatars/352796410850312192/160737b70aa4117fb2f400a43c1a6dc8.webp?size=256)
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](https://cdn.discordapp.com/attachments/1213500290901217330/1213500724307165294/image.png?ex=65f5b39e&is=65e33e9e&hm=dbe39e7cf5d286fd02542acac7442d50713c330606a3f07cf14df0d1db19a947&)
![Avatar](https://cdn.discordapp.com/avatars/678259999201427466/a_54265510de155a7d7909e4d21d587a76.gif?size=256)
Clown
That might be because of not having a "use client" at top
Ah u fixed that
![Avatar](https://cdn.discordapp.com/avatars/352796410850312192/160737b70aa4117fb2f400a43c1a6dc8.webp?size=256)
Broken Nokia
right
![Avatar](https://cdn.discordapp.com/avatars/678259999201427466/a_54265510de155a7d7909e4d21d587a76.gif?size=256)
Clown
Where is the <NavigationMenu>?
![Avatar](https://cdn.discordapp.com/avatars/352796410850312192/160737b70aa4117fb2f400a43c1a6dc8.webp?size=256)
Broken Nokia
i think i figured out where i went wrong
yes thats the issue 😓
i just got the code to work
![Avatar](https://cdn.discordapp.com/avatars/678259999201427466/a_54265510de155a7d7909e4d21d587a76.gif?size=256)
Clown
![:sunglasses_1:](https://cdn.discordapp.com/emojis/767749456648339497.png)
![Avatar](https://cdn.discordapp.com/avatars/352796410850312192/160737b70aa4117fb2f400a43c1a6dc8.webp?size=256)
Broken Nokia
could you please explain how the use client directive changed things?
![Avatar](https://cdn.discordapp.com/avatars/678259999201427466/a_54265510de155a7d7909e4d21d587a76.gif?size=256)
Clown
The navigation menu might be using context or something. I haven't used that from shadcn
![Avatar](https://cdn.discordapp.com/avatars/352796410850312192/160737b70aa4117fb2f400a43c1a6dc8.webp?size=256)
Broken Nokia
never mind i tried it without use client and it still worked
![Avatar](https://cdn.discordapp.com/avatars/352796410850312192/160737b70aa4117fb2f400a43c1a6dc8.webp?size=256)
Broken Nokia
the whole thing was becuase of a syntax (skill) issue
Answer
![Avatar](https://cdn.discordapp.com/avatars/678259999201427466/a_54265510de155a7d7909e4d21d587a76.gif?size=256)
Clown
Yeah i guess NavigationMenu takes care of the context provider abstraction and everything idk
I havent used that nav menu
![Avatar](https://cdn.discordapp.com/avatars/352796410850312192/160737b70aa4117fb2f400a43c1a6dc8.webp?size=256)
Broken Nokia
i see
![Avatar](https://cdn.discordapp.com/avatars/678259999201427466/a_54265510de155a7d7909e4d21d587a76.gif?size=256)
Clown
But since its fixed. Mark the answer as resolved
![Avatar](https://cdn.discordapp.com/avatars/352796410850312192/160737b70aa4117fb2f400a43c1a6dc8.webp?size=256)
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](https://cdn.discordapp.com/avatars/678259999201427466/a_54265510de155a7d7909e4d21d587a76.gif?size=256)
Clown
Here you go
![Avatar](https://cdn.discordapp.com/avatars/352796410850312192/160737b70aa4117fb2f400a43c1a6dc8.webp?size=256)
Broken Nokia
thank you