Skip to main contentSkip to sidebarSkip to headerSkip to footer

Navigation Menu

A collection of links for navigating a website or application.

Installation

Import the component from the passport-ui package.

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

Usage

Basic example showing how to use the component.

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

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗