feat: navigation menu

- create better, more consistent border behavior
- fix broken links in demo

Author: BIT-zhaoyang

app/docs/components/navigation-menu/demo.tsx

@@ -36,7 +36,8 @@ const components: { title: string; href: string; description: string }[] = [
   {
     title: "Scroll-area",
     href: "/docs/components/scroll-area",
-    description: "Visually or semantically separates content.",
+    description:
+      "Augments native scroll functionality for custom, cross-browser styling.",
   },
   {
     title: "Tabs",
@@ -67,22 +68,22 @@ export default function NavigationMenuDemo() {
                     href="/"
                   >
                     <div className="mt-4 mb-2 text-lg font-medium">
-                      shadcn/ui
+                      8bitcn/ui
                     </div>
                     <p className="text-muted-foreground text-sm leading-tight">
                       Beautifully designed components built with Tailwind CSS.
                     </p>
                   </Link>
                 </NavigationMenuLink>
               </li>
-              <ListItem href="/docs" title="Introduction">
-                Re-usable components built using Radix UI and Tailwind CSS.
-              </ListItem>
-              <ListItem href="/docs/installation" title="Installation">
+              <ListItem href="/docs" title="Installation">
                 How to install dependencies and structure your app.
               </ListItem>
-              <ListItem href="/docs/components/typography" title="Typography">
-                Styles for headings, paragraphs, lists...etc
+              <ListItem href="/docs/components/accordion" title="Components">
+                Re-usable components built using Radix UI and Tailwind CSS.
+              </ListItem>
+              <ListItem href="/blocks" title="Building Blocks">
+                Building Retro Blocks for the Web
               </ListItem>
             </ul>
           </NavigationMenuContent>

app/docs/components/navigation-menu/page.tsx

@@ -68,7 +68,7 @@ export default function NavigationMenuPage() {
   NavigationMenuList,
   NavigationMenuTrigger,
   NavigationMenuViewport,
-from "@/components/ui/8bit/navigation-menu"
+} from "@/components/ui/8bit/navigation-menu"
 `}</CodeSnippet>
 
       <CodeSnippet>{`<NavigationMenu>

app/globals.css

@@ -76,6 +76,7 @@
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
   --sidebar-border: oklch(0.92 0.004 286.32);
   --sidebar-ring: oklch(0.795 0.184 86.047);
+  --shadow-border: var(--foreground);
 }
 
 .dark {
@@ -110,6 +111,7 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.554 0.135 66.442);
+  --shadow-border: var(--ring);
 }
 
 @layer base {
@@ -120,3 +122,11 @@
     @apply bg-background text-foreground;
   }
 }
+
+.shadow-border {
+  box-shadow:
+    6px 0px var(--shadow-border),
+    -6px 0px var(--shadow-border),
+    0px 6px var(--shadow-border),
+    0px -6px var(--shadow-border);
+}

components/ui/8bit/navigation-menu.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import { Press_Start_2P } from "next/font/google"
+import { Indicator, Root, Viewport } from "@radix-ui/react-navigation-menu"
 import { cva, VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
@@ -11,7 +12,6 @@ import {
   NavigationMenuLink as ShadcnNavigationMenuLink,
   NavigationMenuList as ShadcnNavigationMenuList,
   NavigationMenuTrigger as ShadcnNavigationMenuTrigger,
-  NavigationMenuViewport as ShadcnNavigationMenuViewport,
 } from "@/components/ui/navigation-menu"
 
 export { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu"
@@ -44,13 +44,26 @@ export interface BitNavigationMenuProps
 function NavigationMenu({
   className,
   font,
+  children,
+  viewport = true,
   ...props
-}: React.ComponentProps<typeof ShadcnNavigationMenu> & FontVariantProps) {
+}: React.ComponentProps<typeof Root> & {
+  viewport?: boolean
+} & FontVariantProps) {
   return (
-    <ShadcnNavigationMenu
-      className={cn(font !== "normal" && pressStart.className, className)}
+    <Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        font !== "normal" && pressStart.className,
+        className
+      )}
       {...props}
-    />
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </Root>
   )
 }
 
@@ -120,13 +133,24 @@ function NavigationMenuViewport({
   className,
   font,
   ...props
-}: React.ComponentProps<typeof ShadcnNavigationMenuViewport> &
-  FontVariantProps) {
+}: React.ComponentProps<typeof Viewport> & FontVariantProps) {
   return (
-    <ShadcnNavigationMenuViewport
-      className={cn(font !== "normal" && pressStart.className, className)}
-      {...props}
-    />
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center"
+      )}
+    >
+      <Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-3 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+          font !== "normal" && pressStart.className,
+          "shadow-border",
+          className
+        )}
+        {...props}
+      />
+    </div>
   )
 }
 
@@ -150,10 +174,17 @@ function NavigationMenuIndicator({
 }: React.ComponentProps<typeof ShadcnNavigationMenuIndicator> &
   FontVariantProps) {
   return (
-    <ShadcnNavigationMenuIndicator
-      className={cn(font !== "normal" && pressStart.className, className)}
+    <Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "data-[state=visible]:animate-in data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        font !== "normal" && pressStart.className,
+        className
+      )}
       {...props}
-    />
+    >
+      <div className="bg-foreground dark:bg-ring relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </Indicator>
   )
 }
 

package.json

@@ -22,7 +22,7 @@
     "@radix-ui/react-hover-card": "^1.1.14",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-menubar": "^1.1.15",
-    "@radix-ui/react-navigation-menu": "^1.2.12",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-radio-group": "^1.3.7",