diff --git a/src/components/LibraryLayout.tsx b/src/components/LibraryLayout.tsx
index 55a28c64a..afae1e410 100644
--- a/src/components/LibraryLayout.tsx
+++ b/src/components/LibraryLayout.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { ChevronLeft, ChevronRight, Menu } from 'lucide-react'
+import { ChevronLeft, ChevronRight, Menu, X } from 'lucide-react'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import { DiscordIcon } from '~/components/icons/DiscordIcon'
 import { YouTubeIcon } from '~/components/icons/YouTubeIcon'
@@ -8,6 +8,7 @@ import { useLocalStorage } from '~/utils/useLocalStorage'
 import { useClickOutside } from '~/hooks/useClickOutside'
 import { last } from '~/utils/utils'
 import type { ConfigSchema, MenuItem } from '~/utils/config'
+import { getActiveDocsNavTabId, getTabbedMenuConfig } from '~/utils/docsNavTabs'
 import { Framework, LibraryId } from '~/libraries'
 import { frameworkOptions } from '~/libraries/frameworks'
 import { twMerge } from 'tailwind-merge'
@@ -123,15 +124,19 @@ function MobilePartnersStrip({
     const inner = innerRef.current
     if (!inner) return
 
+    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)')
+    // The strip is mobile-only (md:hidden), so don't run the rAF loop on md+
+    // where it isn't painted.
+    const isDesktop = window.matchMedia('(min-width: 768px)')
+
     let animationId: number
     let timeoutId: ReturnType<typeof setTimeout>
-    const scrollSpeed = 0.15 // pixels per frame
-    const startDelay = 4000 // wait 4 seconds before starting (first time only)
+    const scrollSpeed = 0.15
+    const startDelay = 4000
 
     const animate = () => {
       if (!isHovered && inner) {
         scrollPositionRef.current += scrollSpeed
-        // Reset when we've scrolled past the first set
         if (scrollPositionRef.current >= inner.scrollWidth / 2) {
           scrollPositionRef.current = 0
         }
@@ -140,19 +145,37 @@ function MobilePartnersStrip({
       animationId = requestAnimationFrame(animate)
     }
 
-    if (!hasStartedRef.current) {
-      timeoutId = setTimeout(() => {
-        hasStartedRef.current = true
+    const start = () => {
+      if (reduceMotion.matches || isDesktop.matches) return
+      if (!hasStartedRef.current) {
+        timeoutId = setTimeout(() => {
+          hasStartedRef.current = true
+          animationId = requestAnimationFrame(animate)
+        }, startDelay)
+      } else {
         animationId = requestAnimationFrame(animate)
-      }, startDelay)
-    } else {
-      animationId = requestAnimationFrame(animate)
+      }
     }
 
-    return () => {
+    const stop = () => {
       clearTimeout(timeoutId)
       cancelAnimationFrame(animationId)
     }
+
+    const restart = () => {
+      stop()
+      start()
+    }
+
+    isDesktop.addEventListener('change', restart)
+    reduceMotion.addEventListener('change', restart)
+    start()
+
+    return () => {
+      isDesktop.removeEventListener('change', restart)
+      reduceMotion.removeEventListener('change', restart)
+      stop()
+    }
   }, [isHovered])
 
   return (
@@ -722,6 +745,7 @@ const useMenuConfig = ({
 
       return {
         label: section.label,
+        tab: section.tab,
         children,
         collapsible: section.collapsible ?? false,
         defaultCollapsed: section.defaultCollapsed ?? false,
@@ -769,24 +793,132 @@ export function LibraryLayout({
 
   const isNpmStats = matches.some((d) => d.pathname.includes('/docs/npm-stats'))
 
-  const detailsRef = React.useRef<HTMLElement>(null!)
+  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false)
+  const mobileMenuDialogRef = React.useRef<HTMLDivElement>(null)
+  const closeMobileMenu = React.useCallback(() => {
+    setMobileMenuOpen(false)
+  }, [])
+
+  const docsMatch = matches.find((d) => d.pathname.includes('/docs'))
+  const docsPathname = docsMatch?.pathname ?? ''
+
+  const relativePathname = lastMatch.pathname.replace(docsPathname + '/', '')
+
+  React.useEffect(() => {
+    closeMobileMenu()
+  }, [closeMobileMenu, lastMatch.pathname])
+
+  React.useEffect(() => {
+    if (!mobileMenuOpen) return
+
+    const dialog = mobileMenuDialogRef.current
+    if (!dialog) return
+
+    const previouslyFocused =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null
+    const focusableSelector = [
+      'a[href]',
+      'button:not([disabled])',
+      'input:not([disabled])',
+      'select:not([disabled])',
+      'textarea:not([disabled])',
+      '[tabindex]:not([tabindex="-1"])',
+    ].join(',')
+    const getFocusableElements = () =>
+      Array.from(
+        dialog.querySelectorAll<HTMLElement>(focusableSelector),
+      ).filter(
+        (element) =>
+          element.getAttribute('aria-hidden') !== 'true' &&
+          element.getClientRects().length > 0,
+      )
+
+    const focusFirstElement = () => {
+      const [firstElement] = getFocusableElements()
+      const target = firstElement ?? dialog
+      target.focus({ preventScroll: true })
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        closeMobileMenu()
+        return
+      }
+
+      if (event.key !== 'Tab') return
+
+      const focusableElements = getFocusableElements()
+      if (!focusableElements.length) {
+        event.preventDefault()
+        dialog.focus({ preventScroll: true })
+        return
+      }
+
+      const firstElement = focusableElements[0]
+      const lastElement = focusableElements[focusableElements.length - 1]
+      const activeElement = document.activeElement
+
+      if (!dialog.contains(activeElement)) {
+        event.preventDefault()
+        firstElement.focus({ preventScroll: true })
+        return
+      }
+
+      if (event.shiftKey && activeElement === firstElement) {
+        event.preventDefault()
+        lastElement.focus({ preventScroll: true })
+        return
+      }
+
+      if (!event.shiftKey && activeElement === lastElement) {
+        event.preventDefault()
+        firstElement.focus({ preventScroll: true })
+      }
+    }
+
+    const focusTimer = window.setTimeout(focusFirstElement, 0)
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      window.clearTimeout(focusTimer)
+      window.removeEventListener('keydown', onKeyDown)
+      previouslyFocused?.focus({ preventScroll: true })
+    }
+  }, [closeMobileMenu, mobileMenuOpen])
+
+  const tabbedMenuConfig = React.useMemo(() => {
+    return getTabbedMenuConfig(menuConfig)
+  }, [menuConfig])
+
+  const activeTabId = React.useMemo(() => {
+    return getActiveDocsNavTabId({
+      isExample,
+      menuConfig,
+      pathname: lastMatch.pathname,
+      relativePathname,
+    })
+  }, [isExample, lastMatch.pathname, menuConfig, relativePathname])
+
+  const visibleMenuConfig = React.useMemo(() => {
+    return (
+      tabbedMenuConfig.find((tab) => tab.id === activeTabId)?.groups ??
+      menuConfig
+    )
+  }, [activeTabId, menuConfig, tabbedMenuConfig])
 
   const flatMenu = React.useMemo(
-    () => menuConfig.flatMap((d) => d?.children),
-    [menuConfig],
+    () => visibleMenuConfig.flatMap((d) => d.children),
+    [visibleMenuConfig],
   )
 
   // Filter out external links for prev/next navigation
   const internalFlatMenu = React.useMemo(
-    () => flatMenu.filter((d) => d && !d.to.startsWith('http')),
+    () => flatMenu.filter((d) => !d.to.startsWith('http')),
     [flatMenu],
   )
 
-  const docsMatch = matches.find((d) => d.pathname.includes('/docs'))
-  const docsPathname = docsMatch?.pathname ?? ''
-
-  const relativePathname = lastMatch.pathname.replace(docsPathname + '/', '')
-
   const index = internalFlatMenu.findIndex((d) => d?.to === relativePathname)
   const prevItem = internalFlatMenu[index - 1]
   const nextItem = internalFlatMenu[index + 1]
@@ -810,19 +942,24 @@ export function LibraryLayout({
   )
 
   const groupInitialOpenState = React.useMemo(() => {
-    return menuConfig.reduce<Record<string, boolean>>((acc, group, index) => {
-      const isChildActive = group.children.some((child) => child.to === _splat)
-      const key = `${index}:${String(group.label)}`
+    return visibleMenuConfig.reduce<Record<string, boolean>>(
+      (acc, group, index) => {
+        const isChildActive = group.children.some(
+          (child) => child.to === _splat,
+        )
+        const key = `${index}:${String(group.label)}`
 
-      acc[key] = isChildActive
-        ? true
-        : typeof group.defaultCollapsed !== 'undefined'
-          ? !group.defaultCollapsed
-          : false
+        acc[key] = isChildActive
+          ? true
+          : typeof group.defaultCollapsed !== 'undefined'
+            ? !group.defaultCollapsed
+            : false
 
-      return acc
-    }, {})
-  }, [menuConfig, _splat])
+        return acc
+      },
+      {},
+    )
+  }, [visibleMenuConfig, _splat])
 
   const [openGroups, setOpenGroups] = React.useState(groupInitialOpenState)
 
@@ -850,7 +987,7 @@ export function LibraryLayout({
 
   const libraryHomePath = `/${libraryId}/${version}`
 
-  const menuItems = menuConfig.map((group, i) => {
+  const menuItems = visibleMenuConfig.map((group, i) => {
     const groupKey = `${i}:${String(group.label)}`
 
     const groupContent = (
@@ -923,7 +1060,7 @@ export function LibraryLayout({
                   <Link
                     to={libraryHomePath}
                     onClick={() => {
-                      detailsRef.current.removeAttribute('open')
+                      closeMobileMenu()
                     }}
                     className="relative"
                   >
@@ -955,7 +1092,7 @@ export function LibraryLayout({
                       _splat: frameworkDocsTarget.splat,
                     }}
                     onClick={() => {
-                      detailsRef.current.removeAttribute('open')
+                      closeMobileMenu()
                     }}
                     preload="intent"
                     activeOptions={{
@@ -977,7 +1114,7 @@ export function LibraryLayout({
                       _splat: frameworkDocsTarget.splat,
                     }}
                     onClick={() => {
-                      detailsRef.current.removeAttribute('open')
+                      closeMobileMenu()
                     }}
                     preload="intent"
                     activeOptions={{
@@ -995,7 +1132,7 @@ export function LibraryLayout({
                     to={child.to}
                     params={linkParams}
                     onClick={() => {
-                      detailsRef.current.removeAttribute('open')
+                      closeMobileMenu()
                     }}
                     preload="intent"
                     activeOptions={{
@@ -1034,33 +1171,39 @@ export function LibraryLayout({
   })
 
   const smallMenu = (
-    <div
-      className="md:hidden bg-white/50 sticky top-[var(--navbar-height)]
-    max-h-[calc(100dvh-var(--navbar-height))] overflow-y-auto z-20 dark:bg-black/60 backdrop-blur-lg"
-    >
-      <details
-        ref={detailsRef as any}
-        id="docs-details"
-        className="border-b border-gray-500/20"
+    <div className="md:hidden">
+      {mobileMenuOpen ? (
+        <button
+          type="button"
+          aria-label="Close documentation menu"
+          className="fixed inset-x-0 bottom-0 top-[var(--navbar-height)] z-40 bg-black/30 backdrop-blur-sm"
+          onClick={closeMobileMenu}
+        />
+      ) : null}
+      <div
+        ref={mobileMenuDialogRef}
+        id="docs-mobile-menu"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Documentation navigation"
+        hidden={!mobileMenuOpen}
+        tabIndex={-1}
+        className="fixed inset-x-0 top-[var(--navbar-height)] z-50
+        max-h-[calc(100dvh-var(--navbar-height))] overflow-y-auto
+        bg-white dark:bg-black/95 backdrop-blur-lg border-b border-gray-500/20 shadow-xl"
       >
-        <summary className="py-2 px-4 flex gap-2 items-center">
-          <div className="flex gap-2 items-center shrink-0 pr-2">
-            <Menu className="cursor-pointer" />
-            Docs
-          </div>
-          <div className="w-px h-6 bg-gray-300 dark:bg-gray-600 shrink-0" />
-          <MobilePartnersStrip
-            partners={docsStripPartners}
-            placementContext={docsStripPlacementContext}
-            onLabelClick={() => {
-              const details = detailsRef.current as HTMLDetailsElement | null
-              if (details) {
-                details.open = !details.open
-              }
-            }}
-          />
-        </summary>
-        <div className="flex flex-col gap-4 p-4 overflow-y-auto border-t border-gray-500/20 bg-white/20 text-lg dark:bg-black/20">
+        <div className="flex items-center justify-between py-2 px-4 border-b border-gray-500/20">
+          <span className="font-bold">Docs</span>
+          <button
+            type="button"
+            aria-label="Close menu"
+            className="p-1 rounded-md hover:bg-gray-500/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-current"
+            onClick={closeMobileMenu}
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+        <div className="flex flex-col gap-4 p-4 text-lg">
           <div className="flex flex-col gap-1">
             <FrameworkSelect libraryId={libraryId} />
             <VersionSelect libraryId={libraryId} />
@@ -1068,7 +1211,7 @@ export function LibraryLayout({
           <SearchButton />
           {menuItems}
         </div>
-      </details>
+      </div>
     </div>
   )
 
@@ -1098,7 +1241,7 @@ export function LibraryLayout({
         )}
       >
         <DocsMenuStrip
-          menuConfig={menuConfig}
+          menuConfig={visibleMenuConfig}
           activeItem={relativePathname}
           fullPathname={lastMatch.pathname}
           colorFrom={colorFrom}
@@ -1128,14 +1271,15 @@ export function LibraryLayout({
           'max-w-[250px] xl:max-w-[300px] 2xl:max-w-[400px]',
           'flex-col overflow-hidden',
           'h-[calc(100dvh-var(--navbar-height))] top-[var(--navbar-height)]',
-          'z-20 border-r border-gray-500/20',
+          'border-r border-gray-500/20',
           'transition-all duration-300',
           // Hidden on smallest screens, flex on md+
           'hidden md:flex',
-          // On md to xl: fixed overlay that slides in from left-0 (covers the strip)
-          'md:fixed md:left-0 md:bg-white md:dark:bg-black/95 md:backdrop-blur-lg md:shadow-xl',
-          // On xl+: sticky positioning, no overlay styling
-          'xl:sticky xl:bg-transparent xl:dark:bg-transparent xl:backdrop-blur-none xl:shadow-none',
+          // On md to xl: fixed overlay that slides in from left-0 (covers the strip).
+          // z-40 keeps the sliding overlay above the docs tab bar (z-30).
+          'md:fixed md:left-0 md:z-40 md:bg-white md:dark:bg-black/95 md:backdrop-blur-lg md:shadow-xl',
+          // On xl+: sticky positioning sitting inline below tabs, no overlay styling
+          'xl:sticky xl:z-20 xl:bg-transparent xl:dark:bg-transparent xl:backdrop-blur-none xl:shadow-none',
           // Slide animation for md-xl screens (off-screen by default, slides in when shown)
           // On xl+: always visible (no translate)
           !showLargeMenu && 'md:-translate-x-full xl:translate-x-0',
@@ -1159,7 +1303,7 @@ export function LibraryLayout({
           }
         }}
       >
-        <div className="flex-1 flex flex-col overflow-y-auto">
+        <div className="flex-1 flex flex-col overflow-y-auto min-w-[230px]">
           <div className="flex flex-col gap-1 p-4">
             <FrameworkSelect libraryId={libraryId} />
             <VersionSelect libraryId={libraryId} />
@@ -1172,6 +1316,91 @@ export function LibraryLayout({
     </>
   )
 
+  const docsTabs = (
+    <div className="sticky top-[calc(var(--navbar-height)-1px)] z-30 border-b border-gray-500/20 bg-white/90 dark:bg-black/80 backdrop-blur-lg">
+      <div className="flex items-stretch">
+        <button
+          type="button"
+          aria-label="Documentation menu"
+          aria-expanded={mobileMenuOpen}
+          aria-controls="docs-mobile-menu"
+          onClick={() => {
+            if (mobileMenuOpen) {
+              closeMobileMenu()
+              return
+            }
+
+            setMobileMenuOpen(true)
+          }}
+          className="md:hidden flex items-center gap-1.5 shrink-0 px-3 border-r border-gray-500/20 text-slate-600 dark:text-slate-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-current"
+        >
+          {mobileMenuOpen ? (
+            <X className="w-4 h-4" />
+          ) : (
+            <Menu className="w-4 h-4" />
+          )}
+          <span className="text-xs font-medium">Menu</span>
+        </button>
+        <nav
+          aria-label="Documentation sections"
+          className="flex flex-1 items-stretch gap-6 overflow-x-auto px-3 md:px-6 text-sm [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        >
+          {tabbedMenuConfig.map((tab) => {
+            const target = tab.firstItem
+            const isActive = tab.id === activeTabId
+
+            if (!target) {
+              return null
+            }
+
+            const linkParams =
+              !target.to.startsWith('/') || target.to.includes('/$libraryId')
+                ? ({ libraryId, version } as never)
+                : undefined
+
+            return (
+              <Link
+                key={tab.id}
+                from="/$libraryId/$version/docs"
+                to={target.to}
+                params={linkParams}
+                aria-current={isActive ? true : undefined}
+                onClick={closeMobileMenu}
+                className={twMerge(
+                  'relative whitespace-nowrap py-3 font-semibold transition-colors',
+                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-current rounded-sm',
+                  isActive
+                    ? `text-transparent bg-clip-text bg-linear-to-r ${colorFrom} ${colorTo}`
+                    : 'text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100',
+                )}
+              >
+                {tab.label}
+                {isActive ? (
+                  <span
+                    aria-hidden="true"
+                    className={twMerge(
+                      'absolute left-0 right-0 -bottom-px h-[3px] rounded-t-full bg-linear-to-r',
+                      colorFrom,
+                      colorTo,
+                    )}
+                  />
+                ) : null}
+              </Link>
+            )
+          })}
+        </nav>
+      </div>
+      {docsStripPartners.length ? (
+        <div className="md:hidden flex items-center gap-2 px-3 py-1 border-t border-gray-500/10">
+          <MobilePartnersStrip
+            partners={docsStripPartners}
+            placementContext={docsStripPlacementContext}
+          />
+        </div>
+      ) : null}
+    </div>
+  )
+
   return (
     <WidthToggleContext.Provider value={{ isFullWidth, setIsFullWidth }}>
       <DocNavigationContext.Provider
@@ -1196,14 +1425,16 @@ export function LibraryLayout({
           {largeMenu}
           <div
             className={twMerge(
-              'flex flex-col max-w-full min-w-0 flex-1 min-h-0 relative',
-              !isLandingPage && 'px-4 md:px-8',
+              'flex flex-col max-w-full min-w-0 flex-1 min-h-0 relative [--docs-tabs-height:45px]',
             )}
           >
+            {docsTabs}
             <div
               className={twMerge(
                 `max-w-full min-w-0 flex flex-col justify-center w-full`,
 
+                !isLandingPage && 'px-4 md:px-8',
+
                 !isLandingPage &&
                   !isExample &&
                   !isNpmStats &&
@@ -1220,7 +1451,7 @@ export function LibraryLayout({
             )}
           </div>
           {!isLandingPage && (
-            <RightRail breakpoint="md" className="md:w-[280px]">
+            <RightRail breakpoint="md" className="md:w-[220px]">
               <PartnersRail
                 analyticsPlacement="docs_rail"
                 partners={activePartners}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index b93b1e878..79dfdd58d 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -451,8 +451,15 @@ export function Navbar({ children }: { children: React.ReactNode }) {
         ? new window.ResizeObserver(scheduleContainerHeightUpdate)
         : null
 
+    let lastWidth = window.innerWidth
+    const scheduleWidthAwareContainerHeightUpdate = () => {
+      if (window.innerWidth === lastWidth) return
+      lastWidth = window.innerWidth
+      scheduleContainerHeightUpdate()
+    }
+
     resizeObserver?.observe(container)
-    window.addEventListener('resize', scheduleContainerHeightUpdate)
+    window.addEventListener('resize', scheduleWidthAwareContainerHeightUpdate)
 
     return () => {
       if (animationFrameId !== null) {
@@ -460,7 +467,10 @@ export function Navbar({ children }: { children: React.ReactNode }) {
       }
 
       resizeObserver?.disconnect()
-      window.removeEventListener('resize', scheduleContainerHeightUpdate)
+      window.removeEventListener(
+        'resize',
+        scheduleWidthAwareContainerHeightUpdate,
+      )
     }
   }, [])
 
diff --git a/src/components/Toc.tsx b/src/components/Toc.tsx
index f7c28e575..5e2c5beb6 100644
--- a/src/components/Toc.tsx
+++ b/src/components/Toc.tsx
@@ -41,7 +41,7 @@ export function Toc({
     })
   }, [headings, currentFramework])
   return (
-    <nav className="flex flex-col sticky top-[var(--navbar-height)] max-h-[calc(100dvh-var(--navbar-height))] overflow-hidden">
+    <nav className="flex flex-col sticky top-[calc(var(--navbar-height)+var(--docs-tabs-height,0px))] max-h-[calc(100dvh-var(--navbar-height)-var(--docs-tabs-height,0px))] overflow-hidden">
       <div className="py-1">
         <h3 className="text-[.8em] lg:text-[.825em] xl:text-[.875em] 2xl:text-[.9em] font-bold">
           On this page
diff --git a/src/utils/config.ts b/src/utils/config.ts
index ad3264376..067cee4c0 100644
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -3,15 +3,18 @@ import {
   fetchRepoFile,
   isRecoverableGitHubContentError,
 } from './documents.server'
+import { docsNavTabIds, type DocsNavTabId } from './docsNavTabs'
 import { createServerFn } from '@tanstack/react-start'
 import { setResponseHeaders } from '@tanstack/react-start/server'
 
 export type MenuItem = {
   label: string | React.ReactNode
+  tab?: DocsNavTabId
   children: {
     label: string | React.ReactNode
     to: string
     badge?: string
+    tab?: DocsNavTabId
     /** ISO date string marking when the page was added. Drives the "New" sidebar pill. */
     addedAt?: string
     /** ISO date string marking when the page was last meaningfully updated. Drives the "Updated" sidebar pill. */
@@ -21,15 +24,19 @@ export type MenuItem = {
   defaultCollapsed?: boolean
 }
 
+const tabSchema = v.optional(v.picklist(docsNavTabIds))
+
 const configSchema = v.object({
   sections: v.array(
     v.object({
       label: v.string(),
+      tab: tabSchema,
       children: v.array(
         v.object({
           label: v.string(),
           to: v.string(),
           badge: v.optional(v.string()),
+          tab: tabSchema,
           addedAt: v.optional(v.string()),
           updatedAt: v.optional(v.string()),
         }),
@@ -43,6 +50,7 @@ const configSchema = v.object({
                 label: v.string(),
                 to: v.string(),
                 badge: v.optional(v.string()),
+                tab: tabSchema,
                 addedAt: v.optional(v.string()),
                 updatedAt: v.optional(v.string()),
               }),
diff --git a/src/utils/docsNavTabs.ts b/src/utils/docsNavTabs.ts
new file mode 100644
index 000000000..58f169d79
--- /dev/null
+++ b/src/utils/docsNavTabs.ts
@@ -0,0 +1,218 @@
+import type { ReactNode } from 'react'
+import type { MenuItem } from './config'
+
+export const docsNavTabIds = [
+  'get-started',
+  'tutorial',
+  'guides',
+  'api',
+  'examples',
+  'community',
+] as const
+
+export type DocsNavTabId = (typeof docsNavTabIds)[number]
+
+export const docsNavTabs: Array<{ id: DocsNavTabId; label: string }> = [
+  { id: 'get-started', label: 'Get Started' },
+  { id: 'tutorial', label: 'Tutorial' },
+  { id: 'guides', label: 'Guides' },
+  { id: 'api', label: 'API' },
+  { id: 'examples', label: 'Examples' },
+  { id: 'community', label: 'Community' },
+]
+
+function getLabelText(label: ReactNode) {
+  return typeof label === 'string' ? label : ''
+}
+
+function getFallbackDocsNavTabId(
+  group: MenuItem,
+  child: MenuItem['children'][number],
+): DocsNavTabId {
+  const groupLabel = getLabelText(group.label).toLowerCase()
+  const childLabel = getLabelText(child.label).toLowerCase()
+  const to = child.to.toLowerCase()
+  const searchText = `${groupLabel} ${childLabel} ${to}`
+
+  if (
+    child.to.startsWith('http') ||
+    searchText.includes('community') ||
+    searchText.includes('contributors') ||
+    searchText.includes('npm-stats') ||
+    searchText.includes('npm stats') ||
+    searchText.includes('blog') ||
+    searchText.includes('github') ||
+    searchText.includes('discord') ||
+    searchText.includes('youtube')
+  ) {
+    return 'community'
+  }
+
+  if (searchText.includes('example')) {
+    return 'examples'
+  }
+
+  if (
+    to.includes('/api/') ||
+    to.startsWith('api/') ||
+    to.includes('/reference/') ||
+    to.startsWith('reference/') ||
+    groupLabel.includes('api') ||
+    groupLabel.includes('reference')
+  ) {
+    return 'api'
+  }
+
+  if (searchText.includes('tutorial')) {
+    return 'tutorial'
+  }
+
+  if (
+    groupLabel.includes('get started') ||
+    groupLabel.includes('getting started') ||
+    groupLabel.includes('overview') ||
+    childLabel === 'home' ||
+    childLabel === 'frameworks' ||
+    searchText.includes('installation') ||
+    searchText.includes('quick-start') ||
+    searchText.includes('quick start') ||
+    searchText.includes('introduction') ||
+    searchText.includes('overview')
+  ) {
+    return 'get-started'
+  }
+
+  return 'guides'
+}
+
+export function getDocsNavTabId(
+  group: MenuItem,
+  child: MenuItem['children'][number],
+) {
+  return child.tab ?? group.tab ?? getFallbackDocsNavTabId(group, child)
+}
+
+// A tab's `firstItem` is the destination clicked when the user activates the
+// tab. It must point at real docs content, never a utility/special target like
+// `..` (library home), `./framework` (framework picker), or external links.
+function isDocsTabTarget(to: string) {
+  if (to.startsWith('http')) return false
+  if (to === '..' || to === './framework') return false
+  if (to.startsWith('/')) return to.includes('/docs/')
+  return true
+}
+
+export function getTabbedMenuConfig(menuConfig: MenuItem[]) {
+  return docsNavTabs
+    .map((tab) => {
+      const groups = menuConfig
+        .map((group) => {
+          const children = group.children.filter((child) => {
+            return getDocsNavTabId(group, child) === tab.id
+          })
+
+          return children.length
+            ? {
+                ...group,
+                children,
+              }
+            : undefined
+        })
+        .filter((group): group is MenuItem => group !== undefined)
+
+      const children = groups.flatMap((group) => group.children)
+
+      return {
+        ...tab,
+        groups,
+        firstItem:
+          children.find((child) => isDocsTabTarget(child.to)) ??
+          children.find((child) => !child.to.startsWith('http')),
+      }
+    })
+    .filter((tab) => tab.groups.length)
+}
+
+// Matches a menu child's `to` against the current pathname, handling the
+// special/absolute internal paths used by the Menu group (e.g. `..`,
+// `./framework`, `/$libraryId/$version/docs/...`) in addition to plain
+// relative doc paths.
+function isChildPathMatch({
+  childTo,
+  pathname,
+  relativePathname,
+}: {
+  childTo: string
+  pathname: string
+  relativePathname: string
+}) {
+  if (childTo === relativePathname) return true
+
+  if (childTo === '..') {
+    return /^\/[^/]+\/[^/]+\/?$/.test(pathname)
+  }
+
+  if (childTo === './framework') {
+    return (
+      pathname.includes('/docs/framework') &&
+      !/\/docs\/framework\/[^/]+/.test(pathname)
+    )
+  }
+
+  if (childTo.includes('/$libraryId/$version/docs/')) {
+    const suffix = childTo.split('/docs/')[1]
+    return Boolean(suffix) && pathname.includes(`/docs/${suffix}`)
+  }
+
+  return false
+}
+
+export function getActiveDocsNavTabId({
+  isExample,
+  menuConfig,
+  pathname,
+  relativePathname,
+}: {
+  isExample: boolean
+  menuConfig: MenuItem[]
+  pathname: string
+  relativePathname: string
+}) {
+  if (isExample) {
+    return 'examples'
+  }
+
+  const activeGroup = menuConfig.find((group) =>
+    group.children.some((child) =>
+      isChildPathMatch({ childTo: child.to, pathname, relativePathname }),
+    ),
+  )
+  const activeChild = activeGroup?.children.find((child) =>
+    isChildPathMatch({ childTo: child.to, pathname, relativePathname }),
+  )
+
+  if (activeGroup && activeChild) {
+    return getDocsNavTabId(activeGroup, activeChild)
+  }
+
+  if (
+    pathname.includes('/docs/api/') ||
+    pathname.includes('/docs/reference/')
+  ) {
+    return 'api'
+  }
+
+  if (pathname.includes('/docs/tutorial')) {
+    return 'tutorial'
+  }
+
+  if (
+    pathname.includes('/docs/community') ||
+    pathname.includes('/docs/contributors') ||
+    pathname.includes('/docs/npm-stats')
+  ) {
+    return 'community'
+  }
+
+  return 'get-started'
+}