 1import {
 2  NavigationMenu,
 3  NavigationMenuList,
 4  NavigationMenuItem,
 5  NavigationMenuTrigger,
 6  NavigationMenuContent,
 7  NavigationMenuLink,
 8  NavigationMenuGroupHeading,
 9} from "@/components/wensity/navigation-menu";
10
11export function MegaMenuNav() {
12  return (
13    <NavigationMenu>
14      <NavigationMenuList>
15        <NavigationMenuItem>
16          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
17          <NavigationMenuContent width="w-[44rem]">
18            <div className="grid grid-cols-3 gap-4">
19              {/* Column groups with headings */}
20            </div>
21          </NavigationMenuContent>
22        </NavigationMenuItem>
23        <NavigationMenuItem>
24          <NavigationMenuLink href="/pricing">Pricing</NavigationMenuLink>
25        </NavigationMenuItem>
26      </NavigationMenuList>
27    </NavigationMenu>
28  );
29}

Icons

Visual icons for faster wayfinding and recognition.

examples/navigation-menu-icons.tsx

 1import {
 2  NavigationMenu,
 3  NavigationMenuList,
 4  NavigationMenuItem,
 5  NavigationMenuTrigger,
 6  NavigationMenuLink,
 7  NavigationMenuIcon,
 8} from "@/components/wensity/navigation-menu";
 9import { IconHome, IconSettings } from "@tabler/icons-react";
10
11export function IconsNav() {
12  return (
13    <NavigationMenu>
14      <NavigationMenuList>
15        <NavigationMenuItem>
16          <NavigationMenuLink href="/">
17            <NavigationMenuIcon><IconHome /></NavigationMenuIcon>
18            Home
19          </NavigationMenuLink>
20        </NavigationMenuItem>
21      </NavigationMenuList>
22    </NavigationMenu>
23  );
24}

Descriptions

Supporting text beneath links to guide user intent.

examples/navigation-menu-descriptions.tsx

 1import {
 2  NavigationMenu,
 3  NavigationMenuList,
 4  NavigationMenuItem,
 5  NavigationMenuTrigger,
 6  NavigationMenuContent,
 7} from "@/components/wensity/navigation-menu";
 8
 9export function DescriptionsNav() {
10  return (
11    <NavigationMenu>
12      <NavigationMenuList>
13        <NavigationMenuItem>
14          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
15          <NavigationMenuContent width="w-[24rem]">
16            {/* Links with descriptive text */}
17          </NavigationMenuContent>
18        </NavigationMenuItem>
19      </NavigationMenuList>
20    </NavigationMenu>
21  );
22}

Nested

Submenus for deeper navigation hierarchies.

examples/navigation-menu-nested.tsx

 1import {
 2  NavigationMenu,
 3  NavigationMenuList,
 4  NavigationMenuItem,
 5  NavigationMenuTrigger,
 6  NavigationMenuContent,
 7  NavigationMenuSub,
 8  NavigationMenuSubTrigger,
 9  NavigationMenuSubContent,
10} from "@/components/wensity/navigation-menu";
11
12export function NestedNav() {
13  return (
14    <NavigationMenu>
15      <NavigationMenuList>
16        <NavigationMenuItem>
17          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
18          <NavigationMenuContent width="w-[20rem]">
19            <NavigationMenuSub>
20              <NavigationMenuSubTrigger>Integrations</NavigationMenuSubTrigger>
21              <NavigationMenuSubContent>
22                {/* Nested items */}
23              </NavigationMenuSubContent>
24            </NavigationMenuSub>
25          </NavigationMenuContent>
26        </NavigationMenuItem>
27      </NavigationMenuList>
28    </NavigationMenu>
29  );
30}

Compact

Minimal navigation for smaller interface headers.

examples/navigation-menu-compact.tsx

 1import {
 2  NavigationMenu,
 3  NavigationMenuList,
 4  NavigationMenuItem,
 5  NavigationMenuTrigger,
 6  NavigationMenuContent,
 7  NavigationMenuLink,
 8  NavigationMenuIcon,
 9} from "@/components/wensity/navigation-menu";
10
11export function CompactNav() {
12  return (
13    <NavigationMenu size="compact">
14      <NavigationMenuList>
15        <NavigationMenuItem>
16          <NavigationMenuTrigger showChevron={false}>
17            <NavigationMenuIcon><IconApps /></NavigationMenuIcon>
18            Products
19          </NavigationMenuTrigger>
20          <NavigationMenuContent width="w-[18rem]">
21            {/* Compact dropdown content */}
22          </NavigationMenuContent>
23        </NavigationMenuItem>
24        <NavigationMenuItem>
25          <NavigationMenuLink href="/docs">Docs</NavigationMenuLink>
26        </NavigationMenuItem>
27      </NavigationMenuList>
28    </NavigationMenu>
29  );
30}

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add navigation-menu

Usage

Import NavigationMenu from @/components/wensity/navigation-menu and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import {
 2  NavigationMenu,
 3  NavigationMenuList,
 4  NavigationMenuItem,
 5  NavigationMenuTrigger,
 6  NavigationMenuContent,
 7  NavigationMenuLink,
 8  NavigationMenuIcon,
 9} from "@/components/wensity/navigation-menu";
10
11export function NavDemo() {
12  return (
13    <NavigationMenu>
14      <NavigationMenuList>
15        <NavigationMenuItem>
16          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
17          <NavigationMenuContent width="w-[24rem]">
18            {/* Dropdown content */}
19          </NavigationMenuContent>
20        </NavigationMenuItem>
21        <NavigationMenuItem>
22          <NavigationMenuLink href="/pricing">Pricing</NavigationMenuLink>
23        </NavigationMenuItem>
24      </NavigationMenuList>
25    </NavigationMenu>
26  );
27}

Props

Prop	Type	Default	Description
`size`	"default" \| "compact"	"default"	Trigger height and spacing.
`value`	string \| null	-	Controlled open menu.
`defaultValue`	string \| null	-	Initially open menu when uncontrolled.
`onValueChange`	(value: string \| null) => void	-	Called when the open menu changes.
`delayDuration`	number	120	Milliseconds the pointer must rest on a trigger before its menu opens.

Featured in React navbar components.

Navigation Menu

Examples

Mega Menu