feat(ui): add typed navbar menu items

2026-08-24 21:36:46 +05:30
parent fc1eea3939
commit 9d64ec60c4
9 changed files with 396 additions and 27 deletions
@@ -90,6 +90,62 @@ the component directory at runtime.
 For the full catalog, see [`COMPONENTS.md`](./COMPONENTS.md). The machine-readable
 equivalent is exported as `@wrnexus/ui/component-reference.json`.

+### Typed Navbar items
+
+Keep navigation data in a shared TypeScript module and validate it with the
+package contract. `NavbarItem` is a discriminated union of `link`, `dropdown`,
+and `mega`; a mega item accepts every `MegaMenu` layout option.
+
+```ts
+import type { NavbarItem } from "@wrnexus/ui";
+
+export const navigation = [
+  { type: "link", label: "Pricing", href: "/pricing" },
+  {
+    type: "dropdown",
+    label: "Company",
+    items: [
+      { label: "About", href: "/about" },
+      { label: "Contact", href: "/contact" },
+    ],
+  },
+  {
+    type: "mega",
+    label: "Products",
+    mega: {
+      variant: "icon-grid",
+      panelWidth: "2xl",
+      columnCount: 3,
+      rail: [{ label: "All products", href: "/products" }],
+      columns: [
+        {
+          heading: "Work",
+          items: [
+            {
+              label: "Projects",
+              href: "/products/projects",
+              icon: "icon-[lucide--folders]",
+              description: "Plan and deliver work",
+              badge: "New",
+            },
+          ],
+        },
+      ],
+      featured: {
+        title: "What's new",
+        actionLabel: "Explore",
+        actionHref: "/new",
+      },
+      actionLabel: "View all products",
+      actionHref: "/products",
+    },
+  },
+] satisfies NavbarItem[];
+```
+
+Importing from `@wrnexus/ui/navigation` is also supported. Existing untyped
+Navbar data using `children` remains accepted at runtime for migration.
+
 ## API

 The JS module (`@wrnexus/ui`) exposes five helpers used by the build tooling to