Navigation Menu

1
import { CircleAlert, CircleCheck, CircleDashed } from "lucide-solid";
2
import type { ComponentProps, JSX } from "solid-js";
3
import { For, splitProps } from "solid-js";
4
import {
5
  NavigationMenu,
6
  NavigationMenuContent,
7
  NavigationMenuItem,
8
  NavigationMenuLink,
9
  NavigationMenuTrigger,
10
  navigationMenuTriggerStyle,
11
} from "~/components/ui/navigation-menu";
12

13
const components = [
14
  {
15
    title: "Alert Dialog",
16
    href: "/docs/components/kobalte/alert-dialog",
17
    description:
18
      "A modal dialog that interrupts the user with important content and expects a response.",
19
  },
20
  {
21
    title: "Hover Card",
22
    href: "/docs/components/kobalte/hover-card",
23
    description: "For sighted users to preview content available behind a link.",
24
  },
25
  {
26
    title: "Progress",
27
    href: "/docs/components/kobalte/progress",
28
    description:
29
      "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
30
  },
31
  {
32
    title: "Scroll Area",
33
    href: "/docs/components/kobalte/scroll-area",
34
    description: "Visually or semantically separates content.",
35
  },
36
  {
37
    title: "Tabs",
38
    href: "/docs/components/kobalte/tabs",
39
    description:
40
      "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
41
  },
42
  {
43
    title: "Tooltip",
44
    href: "/docs/components/kobalte/tooltip",
45
    description:
46
      "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
47
  },
48
];
49

50
export default function NavigationMenuDemo() {
51
  return (
52
    <NavigationMenu>
53
      <NavigationMenuItem>
54
        <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
55
        <NavigationMenuContent>
56
          <ul class="w-96 rounded-md bg-popover p-2">
57
            <ListItem href="/docs" title="Introduction">
58
              Re-usable components built with Tailwind CSS.
59
            </ListItem>
60
            <ListItem href="/docs/installation" title="Installation">
61
              How to install dependencies and structure your app.
62
            </ListItem>
63
            <ListItem href="/docs/components" title="Typography">
64
              Styles for headings, paragraphs, lists...etc
65
            </ListItem>
66
          </ul>
67
        </NavigationMenuContent>
68
      </NavigationMenuItem>
69
      <NavigationMenuItem class="hidden md:flex">
70
        <NavigationMenuTrigger>Components</NavigationMenuTrigger>
71
        <NavigationMenuContent>
72
          <ul class="grid w-[400px] gap-2 rounded-md bg-popover p-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
73
            <For each={components}>
74
              {(component) => (
75
                <ListItem href={component.href} title={component.title}>
76
                  {component.description}
77
                </ListItem>
78
              )}
79
            </For>
80
          </ul>
81
        </NavigationMenuContent>
82
      </NavigationMenuItem>
83
      <NavigationMenuItem>
84
        <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>
85
        <NavigationMenuContent>
86
          <ul class="grid w-[200px] rounded-md bg-popover p-2">
87
            <li>
88
              <NavigationMenuLink
89
                href="/docs/components/kobalte/alert"
90
                class="flex-row items-center gap-2"
91
              >
92
                <CircleAlert />
93
                Backlog
94
              </NavigationMenuLink>
95
              <NavigationMenuLink
96
                href="/docs/components/kobalte/progress"
97
                class="flex-row items-center gap-2"
98
              >
99
                <CircleDashed />
100
                To Do
101
              </NavigationMenuLink>
102
              <NavigationMenuLink
103
                href="/docs/components/kobalte/checkbox"
104
                class="flex-row items-center gap-2"
105
              >
106
                <CircleCheck />
107
                Done
108
              </NavigationMenuLink>
109
            </li>
110
          </ul>
111
        </NavigationMenuContent>
112
      </NavigationMenuItem>
113
      <NavigationMenuItem>
114
        <NavigationMenuLink href="/docs" class={navigationMenuTriggerStyle()}>
115
          Docs
116
        </NavigationMenuLink>
117
      </NavigationMenuItem>
118
    </NavigationMenu>
119
  );
120
}
121

122
type ListItemProps = ComponentProps<"li"> & {
123
  children: JSX.Element;
124
  href: string;
125
  title: string;
126
};
127

128
function ListItem(props: ListItemProps) {
129
  const [local, others] = splitProps(props, ["children", "href", "title"]);
130

131
  return (
132
    <li {...others}>
133
      <NavigationMenuLink href={local.href}>
134
        <div class="flex flex-col gap-1 text-sm">
135
          <div class="leading-none font-medium">{local.title}</div>
136
          <div class="line-clamp-2 text-muted-foreground">{local.children}</div>
137
        </div>
138
      </NavigationMenuLink>
139
    </li>
140
  );
141
}