Navigation Menu

 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}

 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}

 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}

 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}

 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}