diff --git a/docs/config.json b/docs/config.json
index 29b232273f..9d248574ff 100644
--- a/docs/config.json
+++ b/docs/config.json
@@ -5,76 +5,13 @@
     "apiKey": "93e0b83eb0b5af4549b6bf47f90af3f7",
     "indexName": "tanstack-query"
   },
-  "menu": [
+  "sections": [
     {
-      "label": "API Reference",
-      "children": [
-        {
-          "label": "QueryClient",
-          "to": "reference/QueryClient"
-        },
-        {
-          "label": "QueryCache",
-          "to": "reference/QueryCache"
-        },
-        {
-          "label": "MutationCache",
-          "to": "reference/MutationCache"
-        },
-        {
-          "label": "QueryObserver",
-          "to": "reference/QueryObserver"
-        },
-        {
-          "label": "InfiniteQueryObserver",
-          "to": "reference/InfiniteQueryObserver"
-        },
-        {
-          "label": "QueriesObserver",
-          "to": "reference/QueriesObserver"
-        },
-        {
-          "label": "focusManager",
-          "to": "reference/focusManager"
-        },
-        {
-          "label": "onlineManager",
-          "to": "reference/onlineManager"
-        }
-      ]
-    },
-    {
-      "label": "ESLint",
-      "children": [
-        {
-          "label": "ESLint Plugin Query",
-          "to": "eslint/eslint-plugin-query"
-        },
-        {
-          "label": "Exhaustive Deps",
-          "to": "eslint/exhaustive-deps"
-        },
-        {
-          "label": "No deprecated options",
-          "to": "eslint/no-deprecated-options"
-        },
-        {
-          "label": "Prefer object syntax",
-          "to": "eslint/prefer-query-object-syntax"
-        },
-        {
-          "label": "Stable Query Client",
-          "to": "eslint/stable-query-client"
-        }
-      ]
-    }
-  ],
-  "frameworkMenus": [
-    {
-      "framework": "react",
-      "menuItems": [
+      "label": "Getting Started",
+      "children": [],
+      "frameworks": [
         {
-          "label": "Getting Started",
+          "label": "react",
           "children": [
             {
               "label": "Overview",
@@ -115,7 +52,72 @@
           ]
         },
         {
-          "label": "Guides & Concepts",
+          "label": "solid",
+          "children": [
+            {
+              "label": "Overview",
+              "to": "framework/solid/overview"
+            }
+          ]
+        },
+        {
+          "label": "vue",
+          "children": [
+            {
+              "label": "Overview",
+              "to": "framework/vue/overview"
+            },
+            {
+              "label": "Installation",
+              "to": "framework/vue/installation"
+            },
+            {
+              "label": "Quick Start",
+              "to": "framework/vue/quick-start"
+            },
+            {
+              "label": "Devtools",
+              "to": "framework/vue/devtools"
+            },
+            {
+              "label": "TypeScript",
+              "to": "framework/vue/typescript"
+            },
+            {
+              "label": "GraphQL",
+              "to": "framework/vue/graphql"
+            }
+          ]
+        },
+        {
+          "label": "svelte",
+          "children": [
+            {
+              "label": "Overview",
+              "to": "framework/svelte/overview"
+            },
+            {
+              "label": "Installation",
+              "to": "framework/svelte/installation"
+            },
+            {
+              "label": "SSR & SvelteKit",
+              "to": "framework/svelte/ssr"
+            },
+            {
+              "label": "Reactivity",
+              "to": "framework/svelte/reactivity"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "label": "Guides & Concepts",
+      "children": [],
+      "frameworks": [
+        {
+          "label": "react",
           "children": [
             {
               "label": "Important Defaults",
@@ -252,373 +254,444 @@
           ]
         },
         {
-          "label": "Community Resources",
+          "label": "vue",
           "children": [
             {
-              "label": "TkDodo's Blog",
-              "to": "framework/react/community/tkdodos-blog"
+              "label": "Important Defaults",
+              "to": "framework/vue/guides/important-defaults"
             },
             {
-              "label": "Batching Requests",
-              "to": "framework/react/community/batching-requests-using-bathshit"
+              "label": "Queries",
+              "to": "framework/vue/guides/queries"
             },
             {
-              "label": "Query Key Factory",
-              "to": "framework/react/community/lukemorales-query-key-factory"
+              "label": "Query Keys",
+              "to": "framework/vue/guides/query-keys"
             },
             {
-              "label": "React Query Kit",
-              "to": "framework/react/community/liaoliao666-react-query-kit"
+              "label": "Query Functions",
+              "to": "framework/vue/guides/query-functions"
             },
             {
-              "label": "Angular Query",
-              "to": "framework/react/community/angular-query"
+              "label": "Network Mode",
+              "to": "framework/vue/guides/network-mode"
             },
             {
-              "label": "Suspensive React Query",
-              "to": "framework/react/community/suspensive-react-query"
-            }
-          ]
-        },
-        {
-          "label": "Examples",
-          "children": [
-            {
-              "label": "Simple",
-              "to": "framework/react/examples/simple"
+              "label": "Parallel Queries",
+              "to": "framework/vue/guides/parallel-queries"
             },
             {
-              "label": "Basic",
-              "to": "framework/react/examples/basic"
+              "label": "Dependent Queries",
+              "to": "framework/vue/guides/dependent-queries"
             },
             {
-              "label": "Basic w/ GraphQL-Request",
-              "to": "framework/react/examples/basic-graphql-request"
+              "label": "Background Fetching Indicators",
+              "to": "framework/vue/guides/background-fetching-indicators"
             },
             {
-              "label": "Auto Refetching / Polling / Realtime",
-              "to": "framework/react/examples/auto-refetching"
+              "label": "Window Focus Refetching",
+              "to": "framework/vue/guides/window-focus-refetching"
             },
             {
-              "label": "Optimistic Updates in TypeScript",
-              "to": "framework/react/examples/optimistic-updates-typescript"
+              "label": "Disabling/Pausing Queries",
+              "to": "framework/vue/guides/disabling-queries"
             },
             {
-              "label": "Pagination",
-              "to": "framework/react/examples/pagination"
+              "label": "Query Retries",
+              "to": "framework/vue/guides/query-retries"
             },
             {
-              "label": "Load-More & Infinite Scroll",
-              "to": "framework/react/examples/load-more-infinite-scroll"
+              "label": "Paginated Queries",
+              "to": "framework/vue/guides/paginated-queries"
             },
             {
-              "label": "Suspense",
-              "to": "framework/react/examples/suspense"
+              "label": "Infinite Queries",
+              "to": "framework/vue/guides/infinite-queries"
             },
             {
-              "label": "Default Query Function",
-              "to": "framework/react/examples/default-query-function"
+              "label": "Initial Query Data",
+              "to": "framework/vue/guides/initial-query-data"
             },
             {
-              "label": "Playground",
-              "to": "framework/react/examples/playground"
+              "label": "Placeholder Query Data",
+              "to": "framework/vue/guides/placeholder-query-data"
             },
             {
               "label": "Prefetching",
-              "to": "framework/react/examples/prefetching"
+              "to": "framework/vue/guides/prefetching"
             },
             {
-              "label": "Star Wars",
-              "to": "framework/react/examples/star-wars"
+              "label": "Mutations",
+              "to": "framework/vue/guides/mutations"
             },
             {
-              "label": "Rick And Morty",
-              "to": "framework/react/examples/rick-morty"
+              "label": "Query Invalidation",
+              "to": "framework/vue/guides/query-invalidation"
             },
             {
-              "label": "Next.js",
-              "to": "framework/react/examples/nextjs"
+              "label": "Invalidation from Mutations",
+              "to": "framework/vue/guides/invalidations-from-mutations"
             },
             {
-              "label": "React Native",
-              "to": "framework/react/examples/react-native"
+              "label": "Updates from Mutation",
+              "to": "framework/vue/guides/updates-from-mutation-responses"
             },
             {
-              "label": "React Router",
-              "to": "framework/react/examples/react-router"
+              "label": "Optimistic Updates",
+              "to": "framework/vue/guides/optimistic-updates"
             },
             {
-              "label": "Offline Queries and Mutations",
-              "to": "framework/react/examples/offline"
+              "label": "Query Cancellation",
+              "to": "framework/vue/guides/query-cancellation"
             },
             {
-              "label": "Algolia",
-              "to": "framework/react/examples/algolia"
-            }
-          ]
-        },
-        {
-          "label": "Plugins",
-          "children": [
-            {
-              "label": "persistQueryClient",
-              "to": "framework/react/plugins/persistQueryClient"
+              "label": "Scroll Restoration",
+              "to": "framework/vue/guides/scroll-restoration"
             },
             {
-              "label": "createSyncStoragePersister",
-              "to": "framework/react/plugins/createSyncStoragePersister"
+              "label": "Filters",
+              "to": "framework/vue/guides/filters"
             },
             {
-              "label": "createAsyncStoragePersister",
-              "to": "framework/react/plugins/createAsyncStoragePersister"
+              "label": "SSR & Nuxt",
+              "to": "framework/vue/guides/ssr"
             },
             {
-              "label": "broadcastQueryClient (Experimental)",
-              "to": "framework/react/plugins/broadcastQueryClient"
-            }
-          ]
-        },
-        {
-          "label": "API Reference",
-          "children": [
-            {
-              "label": "useQuery",
-              "to": "framework/react/reference/useQuery"
+              "label": "Caching",
+              "to": "framework/vue/guides/caching"
             },
             {
-              "label": "useQueries",
-              "to": "framework/react/reference/useQueries"
+              "label": "Default Query Fn",
+              "to": "framework/vue/guides/default-query-function"
             },
             {
-              "label": "useInfiniteQuery",
-              "to": "framework/react/reference/useInfiniteQuery"
+              "label": "Suspense",
+              "to": "framework/vue/guides/suspense"
             },
             {
-              "label": "useMutation",
-              "to": "framework/react/reference/useMutation"
+              "label": "Custom Logger",
+              "to": "framework/vue/guides/custom-logger"
             },
             {
-              "label": "useIsFetching",
-              "to": "framework/react/reference/useIsFetching"
+              "label": "Custom Client",
+              "to": "framework/vue/guides/custom-client"
             },
             {
-              "label": "useIsMutating",
-              "to": "framework/react/reference/useIsMutating"
+              "label": "Does this replace [Vuex, Pinia]?",
+              "to": "framework/vue/guides/does-this-replace-client-state"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "label": "Community Resources",
+      "children": [],
+      "frameworks": [
+        {
+          "label": "react",
+          "children": [
+            {
+              "label": "TkDodo's Blog",
+              "to": "framework/react/community/tkdodos-blog"
             },
             {
-              "label": "QueryClientProvider",
-              "to": "framework/react/reference/QueryClientProvider"
+              "label": "Batching Requests",
+              "to": "framework/react/community/batching-requests-using-bathshit"
             },
             {
-              "label": "useQueryClient",
-              "to": "framework/react/reference/useQueryClient"
+              "label": "Query Key Factory",
+              "to": "framework/react/community/lukemorales-query-key-factory"
             },
             {
-              "label": "QueryErrorResetBoundary",
-              "to": "framework/react/reference/QueryErrorResetBoundary"
+              "label": "React Query Kit",
+              "to": "framework/react/community/liaoliao666-react-query-kit"
             },
             {
-              "label": "useQueryErrorResetBoundary",
-              "to": "framework/react/reference/useQueryErrorResetBoundary"
+              "label": "Angular Query",
+              "to": "framework/react/community/angular-query"
             },
             {
-              "label": "hydration",
-              "to": "framework/react/reference/hydration"
+              "label": "Suspensive React Query",
+              "to": "framework/react/community/suspensive-react-query"
             }
           ]
-        }
-      ]
-    },
-    {
-      "framework": "solid",
-      "menuItems": [
+        },
         {
-          "label": "Getting Started",
+          "label": "vue",
           "children": [
             {
-              "label": "Overview",
-              "to": "framework/solid/overview"
+              "label": "TkDodo's Blog",
+              "to": "framework/vue/community/tkdodos-blog"
+            },
+            {
+              "label": "Query Key Factory",
+              "to": "framework/vue/community/lukemorales-query-key-factory"
             }
           ]
         }
       ]
     },
     {
-      "framework": "vue",
-      "menuItems": [
+      "label": "API Reference",
+      "children": [
+        {
+          "label": "QueryClient",
+          "to": "reference/QueryClient"
+        },
+        {
+          "label": "QueryCache",
+          "to": "reference/QueryCache"
+        },
+        {
+          "label": "MutationCache",
+          "to": "reference/MutationCache"
+        },
         {
-          "label": "Getting Started",
+          "label": "QueryObserver",
+          "to": "reference/QueryObserver"
+        },
+        {
+          "label": "InfiniteQueryObserver",
+          "to": "reference/InfiniteQueryObserver"
+        },
+        {
+          "label": "QueriesObserver",
+          "to": "reference/QueriesObserver"
+        },
+        {
+          "label": "focusManager",
+          "to": "reference/focusManager"
+        },
+        {
+          "label": "onlineManager",
+          "to": "reference/onlineManager"
+        }
+      ],
+      "frameworks": [
+        {
+          "label": "react",
           "children": [
             {
-              "label": "Overview",
-              "to": "framework/vue/overview"
+              "label": "useQuery",
+              "to": "framework/react/reference/useQuery"
             },
             {
-              "label": "Installation",
-              "to": "framework/vue/installation"
+              "label": "useQueries",
+              "to": "framework/react/reference/useQueries"
             },
             {
-              "label": "Quick Start",
-              "to": "framework/vue/quick-start"
+              "label": "useInfiniteQuery",
+              "to": "framework/react/reference/useInfiniteQuery"
             },
             {
-              "label": "Devtools",
-              "to": "framework/vue/devtools"
+              "label": "useMutation",
+              "to": "framework/react/reference/useMutation"
             },
             {
-              "label": "TypeScript",
-              "to": "framework/vue/typescript"
+              "label": "useIsFetching",
+              "to": "framework/react/reference/useIsFetching"
             },
             {
-              "label": "GraphQL",
-              "to": "framework/vue/graphql"
-            }
-          ]
-        },
-        {
-          "label": "Guides & Concepts",
-          "children": [
-            {
-              "label": "Important Defaults",
-              "to": "framework/vue/guides/important-defaults"
+              "label": "useIsMutating",
+              "to": "framework/react/reference/useIsMutating"
             },
             {
-              "label": "Queries",
-              "to": "framework/vue/guides/queries"
+              "label": "QueryClientProvider",
+              "to": "framework/react/reference/QueryClientProvider"
             },
             {
-              "label": "Query Keys",
-              "to": "framework/vue/guides/query-keys"
+              "label": "useQueryClient",
+              "to": "framework/react/reference/useQueryClient"
             },
             {
-              "label": "Query Functions",
-              "to": "framework/vue/guides/query-functions"
+              "label": "QueryErrorResetBoundary",
+              "to": "framework/react/reference/QueryErrorResetBoundary"
             },
             {
-              "label": "Network Mode",
-              "to": "framework/vue/guides/network-mode"
+              "label": "useQueryErrorResetBoundary",
+              "to": "framework/react/reference/useQueryErrorResetBoundary"
             },
             {
-              "label": "Parallel Queries",
-              "to": "framework/vue/guides/parallel-queries"
+              "label": "hydration",
+              "to": "framework/react/reference/hydration"
+            }
+          ]
+        },
+        {
+          "label": "vue",
+          "children": [
+            {
+              "label": "useQuery",
+              "to": "framework/vue/reference/useQuery"
             },
             {
-              "label": "Dependent Queries",
-              "to": "framework/vue/guides/dependent-queries"
+              "label": "useQueries",
+              "to": "framework/vue/reference/useQueries"
             },
             {
-              "label": "Background Fetching Indicators",
-              "to": "framework/vue/guides/background-fetching-indicators"
+              "label": "useInfiniteQuery",
+              "to": "framework/vue/reference/useInfiniteQuery"
             },
             {
-              "label": "Window Focus Refetching",
-              "to": "framework/vue/guides/window-focus-refetching"
+              "label": "useMutation",
+              "to": "framework/vue/reference/useMutation"
             },
             {
-              "label": "Disabling/Pausing Queries",
-              "to": "framework/vue/guides/disabling-queries"
+              "label": "useIsFetching",
+              "to": "framework/vue/reference/useIsFetching"
             },
             {
-              "label": "Query Retries",
-              "to": "framework/vue/guides/query-retries"
+              "label": "useIsMutating",
+              "to": "framework/vue/reference/useIsMutating"
             },
             {
-              "label": "Paginated Queries",
-              "to": "framework/vue/guides/paginated-queries"
+              "label": "useQueryClient",
+              "to": "framework/vue/reference/useQueryClient"
             },
             {
-              "label": "Infinite Queries",
-              "to": "framework/vue/guides/infinite-queries"
+              "label": "hydration",
+              "to": "framework/vue/reference/hydration"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "label": "ESLint",
+      "children": [
+        {
+          "label": "ESLint Plugin Query",
+          "to": "eslint/eslint-plugin-query"
+        },
+        {
+          "label": "Exhaustive Deps",
+          "to": "eslint/exhaustive-deps"
+        },
+        {
+          "label": "No deprecated options",
+          "to": "eslint/no-deprecated-options"
+        },
+        {
+          "label": "Prefer object syntax",
+          "to": "eslint/prefer-query-object-syntax"
+        },
+        {
+          "label": "Stable Query Client",
+          "to": "eslint/stable-query-client"
+        }
+      ]
+    },
+    {
+      "label": "Plugins",
+      "children": [],
+      "frameworks": [
+        {
+          "label": "react",
+          "children": [
+            {
+              "label": "persistQueryClient",
+              "to": "framework/react/plugins/persistQueryClient"
             },
             {
-              "label": "Initial Query Data",
-              "to": "framework/vue/guides/initial-query-data"
+              "label": "createSyncStoragePersister",
+              "to": "framework/react/plugins/createSyncStoragePersister"
             },
             {
-              "label": "Placeholder Query Data",
-              "to": "framework/vue/guides/placeholder-query-data"
+              "label": "createAsyncStoragePersister",
+              "to": "framework/react/plugins/createAsyncStoragePersister"
             },
             {
-              "label": "Prefetching",
-              "to": "framework/vue/guides/prefetching"
+              "label": "broadcastQueryClient (Experimental)",
+              "to": "framework/react/plugins/broadcastQueryClient"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "label": "Examples",
+      "children": [],
+      "frameworks": [
+        {
+          "label": "react",
+          "children": [
+            {
+              "label": "Simple",
+              "to": "framework/react/examples/simple"
             },
             {
-              "label": "Mutations",
-              "to": "framework/vue/guides/mutations"
+              "label": "Basic",
+              "to": "framework/react/examples/basic"
             },
             {
-              "label": "Query Invalidation",
-              "to": "framework/vue/guides/query-invalidation"
+              "label": "Basic w/ GraphQL-Request",
+              "to": "framework/react/examples/basic-graphql-request"
             },
             {
-              "label": "Invalidation from Mutations",
-              "to": "framework/vue/guides/invalidations-from-mutations"
+              "label": "Auto Refetching / Polling / Realtime",
+              "to": "framework/react/examples/auto-refetching"
             },
             {
-              "label": "Updates from Mutation",
-              "to": "framework/vue/guides/updates-from-mutation-responses"
+              "label": "Optimistic Updates in TypeScript",
+              "to": "framework/react/examples/optimistic-updates-typescript"
             },
             {
-              "label": "Optimistic Updates",
-              "to": "framework/vue/guides/optimistic-updates"
+              "label": "Pagination",
+              "to": "framework/react/examples/pagination"
             },
             {
-              "label": "Query Cancellation",
-              "to": "framework/vue/guides/query-cancellation"
+              "label": "Load-More & Infinite Scroll",
+              "to": "framework/react/examples/load-more-infinite-scroll"
             },
             {
-              "label": "Scroll Restoration",
-              "to": "framework/vue/guides/scroll-restoration"
+              "label": "Suspense",
+              "to": "framework/react/examples/suspense"
             },
             {
-              "label": "Filters",
-              "to": "framework/vue/guides/filters"
+              "label": "Default Query Function",
+              "to": "framework/react/examples/default-query-function"
             },
             {
-              "label": "SSR & Nuxt",
-              "to": "framework/vue/guides/ssr"
+              "label": "Playground",
+              "to": "framework/react/examples/playground"
             },
             {
-              "label": "Caching",
-              "to": "framework/vue/guides/caching"
+              "label": "Prefetching",
+              "to": "framework/react/examples/prefetching"
             },
             {
-              "label": "Default Query Fn",
-              "to": "framework/vue/guides/default-query-function"
+              "label": "Star Wars",
+              "to": "framework/react/examples/star-wars"
             },
             {
-              "label": "Suspense",
-              "to": "framework/vue/guides/suspense"
+              "label": "Rick And Morty",
+              "to": "framework/react/examples/rick-morty"
             },
             {
-              "label": "Custom Logger",
-              "to": "framework/vue/guides/custom-logger"
+              "label": "Next.js",
+              "to": "framework/react/examples/nextjs"
             },
             {
-              "label": "Custom Client",
-              "to": "framework/vue/guides/custom-client"
+              "label": "React Native",
+              "to": "framework/react/examples/react-native"
             },
             {
-              "label": "Does this replace [Vuex, Pinia]?",
-              "to": "framework/vue/guides/does-this-replace-client-state"
-            }
-          ]
-        },
-        {
-          "label": "Community Resources",
-          "children": [
+              "label": "React Router",
+              "to": "framework/react/examples/react-router"
+            },
             {
-              "label": "TkDodo's Blog",
-              "to": "framework/vue/community/tkdodos-blog"
+              "label": "Offline Queries and Mutations",
+              "to": "framework/react/examples/offline"
             },
             {
-              "label": "Query Key Factory",
-              "to": "framework/vue/community/lukemorales-query-key-factory"
+              "label": "Algolia",
+              "to": "framework/react/examples/algolia"
             }
           ]
         },
         {
-          "label": "Examples",
+          "label": "vue",
           "children": [
             {
               "label": "Basic",
@@ -639,70 +712,7 @@
           ]
         },
         {
-          "label": "API Reference",
-          "children": [
-            {
-              "label": "useQuery",
-              "to": "framework/vue/reference/useQuery"
-            },
-            {
-              "label": "useQueries",
-              "to": "framework/vue/reference/useQueries"
-            },
-            {
-              "label": "useInfiniteQuery",
-              "to": "framework/vue/reference/useInfiniteQuery"
-            },
-            {
-              "label": "useMutation",
-              "to": "framework/vue/reference/useMutation"
-            },
-            {
-              "label": "useIsFetching",
-              "to": "framework/vue/reference/useIsFetching"
-            },
-            {
-              "label": "useIsMutating",
-              "to": "framework/vue/reference/useIsMutating"
-            },
-            {
-              "label": "useQueryClient",
-              "to": "framework/vue/reference/useQueryClient"
-            },
-            {
-              "label": "hydration",
-              "to": "framework/vue/reference/hydration"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "framework": "svelte",
-      "menuItems": [
-        {
-          "label": "Getting Started",
-          "children": [
-            {
-              "label": "Overview",
-              "to": "framework/svelte/overview"
-            },
-            {
-              "label": "Installation",
-              "to": "framework/svelte/installation"
-            },
-            {
-              "label": "SSR & SvelteKit",
-              "to": "framework/svelte/ssr"
-            },
-            {
-              "label": "Reactivity",
-              "to": "framework/svelte/reactivity"
-            }
-          ]
-        },
-        {
-          "label": "Examples",
+          "label": "svelte",
           "children": [
             {
               "label": "Simple",