Navigation Menu

1import {
2  NavigationMenu,
3  NavigationMenuContent,
4  NavigationMenuItem,
5  NavigationMenuLink,
6  NavigationMenuList,
7  NavigationMenuTrigger,
8} from "passport-ui";
9import Link from "next/link";

1<NavigationMenu>
2  <NavigationMenuList>
3    <NavigationMenuItem>
4      <NavigationMenuTrigger>Home</NavigationMenuTrigger>
5      <NavigationMenuContent>
6        <ul className="list-container grid-cols-2 w-sm">
7          <li>
8            <NavigationMenuLink className="bg-transparent" asChild>
9              <Link href="/docs">
10                <div className="passport-ui p-1">
11                  <div>
12                    <h3>Introduction</h3>
13                    <p className="line-clamp-2">
14                      Re-usable components built using Radix UI and Tailwind CSS.
15                    </p>
16                  </div>
17                </div>
18              </Link>
19            </NavigationMenuLink>
20          </li>
21          <li>
22            <NavigationMenuLink className="bg-transparent" asChild>
23              <Link href="/docs/installation">
24                <div className="passport-ui p-1">
25                  <div>
26                    <h3>Installation</h3>
27                    <p className="line-clamp-2">
28                      How to install dependencies and structure your app.
29                    </p>
30                  </div>
31                </div>
32              </Link>
33            </NavigationMenuLink>
34          </li>
35        </ul>
36      </NavigationMenuContent>
37    </NavigationMenuItem>
38    <NavigationMenuItem>
39      <NavigationMenuLink asChild>
40        <Link href="/docs">Docs</Link>
41      </NavigationMenuLink>
42    </NavigationMenuItem>
43  </NavigationMenuList>
44</NavigationMenu>