+ 
+ KB
+ + In-depth guides, tutorials, and explainers for best practices for Supabase databases. +
+
+
+ KB
+
+ )
+}
+
+export { Logo }
diff --git a/apps/kb/src/components/Nav.tsx b/apps/kb/src/components/Nav.tsx
new file mode 100644
index 00000000000..268a5953a1e
--- /dev/null
+++ b/apps/kb/src/components/Nav.tsx
@@ -0,0 +1,78 @@
+import {
+ cn,
+ NavigationMenu,
+ NavigationMenuContent,
+ NavigationMenuItem,
+ NavigationMenuLink,
+ NavigationMenuList,
+ NavigationMenuTrigger,
+ navigationMenuTriggerStyle,
+} from 'ui'
+
+/**
+ * Hard-codding links in here for now until we have actual content. Might be worth putting these arrays in their on data file too.
+ */
+const topics = [
+ { label: 'Troubleshooting', href: '#' },
+ { label: 'Migrations', href: '#' },
+ { label: 'Comparisons', href: '#' },
+]
+
+const resources = [
+ { label: 'Status', href: 'https://status.supabase.com' },
+ { label: 'Changelog', href: 'https://supabase.com/changelog' },
+ { label: 'Docs', href: 'https://supabase.com/docs' },
+]
+
+const menus = [
+ { label: 'Topics', items: topics },
+ { label: 'Resources', items: resources },
+]
+
+const triggerClass =
+ 'h-(--header-height) p-2 border-transparent font-normal rounded-none text-foreground-light hover:text-foreground data-open:text-foreground! border-0 focus-ring focus-visible:text-foreground h-full focus-visible:rounded-sm shadow-none!'
+// docs gates this at `md:absolute` (its own base component class) because its
+// nav is hidden entirely below `lg` in favor of a separate mobile menu. kb
+// doesn't have that split — the nav is always visible — so `absolute` is
+// unconditional here; without it, an open menu pushes its siblings around
+// below the `md` breakpoint instead of overlaying them.
+const contentClass =
+ 'absolute top-[calc(100%+4px)]! min-w-56 max-h-[calc(100vh-4rem)] border-y w-screen md:w-64 overflow-hidden overflow-y-auto rounded-none md:rounded-md md:border border-overlay bg-overlay text-foreground-light shadow-md duration-0!'
+const itemClass =
+ 'w-full flex h-8 items-center text-foreground-light text-sm hover:text-foreground select-none rounded-md p-2 leading-none no-underline focus-ring focus-visible:text-foreground'
+
+function Nav() {
+ return (
+