Navigation Menu

1"use client"
2 
3import * as React from "react"
4import Link from "next/link"
5 
6import {
7  Example,
8  ExampleWrapper,
9} from "@/registry/radix-sera/components/example"
10import {
11  NavigationMenu,
12  NavigationMenuContent,
13  NavigationMenuItem,
14  NavigationMenuLink,
15  NavigationMenuList,
16  NavigationMenuTrigger,
17  navigationMenuTriggerStyle,
18} from "@/registry/radix-sera/ui/navigation-menu"
19import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
20 
21const components: { title: string; href: string; description: string }[] = [
22  {
23    title: "Alert Dialog",
24    href: "/docs/primitives/alert-dialog",
25    description:
26      "A modal dialog that interrupts the user with important content and expects a response.",
27  },
28  {
29    title: "Hover Card",
30    href: "/docs/primitives/hover-card",
31    description:
32      "For sighted users to preview content available behind a link.",
33  },
34  {
35    title: "Progress",
36    href: "/docs/primitives/progress",
37    description:
38      "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
39  },
40  {
41    title: "Scroll-area",
42    href: "/docs/primitives/scroll-area",
43    description: "Visually or semantically separates content.",
44  },
45  {
46    title: "Tabs",
47    href: "/docs/primitives/tabs",
48    description:
49      "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
50  },
51  {
52    title: "Tooltip",
53    href: "/docs/primitives/tooltip",
54    description:
55      "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
56  },
57]
58 
59export default function NavigationMenuExample() {
60  return (
61    <ExampleWrapper className="lg:grid-cols-1">
62      <NavigationMenuWithViewport />
63      <NavigationMenuWithoutViewport />
64    </ExampleWrapper>
65  )
66}
67 
68function NavigationMenuWithViewport() {
69  return (
70    <Example title="With Viewport">
71      <NavigationMenu>
72        <NavigationMenuList>
73          <NavigationMenuItem>
74            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
75            <NavigationMenuContent>
76              <ul className="w-96">
77                <ListItem href="/docs" title="Introduction">
78                  Re-usable components built with Tailwind CSS.
79                </ListItem>
80                <ListItem href="/docs/installation" title="Installation">
81                  How to install dependencies and structure your app.
82// … truncated