diff --git a/docs/src/content/docs/utilities/multi-sidebar.mdx b/docs/src/content/docs/utilities/multi-sidebar.mdx
index 28af629..140e793 100644
--- a/docs/src/content/docs/utilities/multi-sidebar.mdx
+++ b/docs/src/content/docs/utilities/multi-sidebar.mdx
@@ -27,7 +27,9 @@ If migrating from that package read the [Migration Steps](#migration) below.
 
 Multi-sidebar can be enabled by adding the `multiSidebar` object to the Starlight Utils configuration.
 
-```ts {12-14}
+To define the sidebars, specify a label and contents for each sidebar. Here is a simplified example of the config used for this site:
+
+```ts {12-14,17-27}
 // astro.config.mjs
 import { defineConfig } from "astro/config";
 import starlight from "@astrojs/starlight";
@@ -44,29 +46,22 @@ export default defineConfig({
           },
         }),
       ],
+      sidebar: [
+        {
+          label: "Main",
+          autogenerate: { directory: "/docs" },
+        },
+        {
+          label: "Demos",
+          autogenerate: { directory: "/demos" },
+          badge: "New",
+        },
+      ],
     }),
   ],
 });
 ```
 
-To define the sidebars, specify a label and contents for each sidebar. Here is a simplified example of the config used for this site:
-
-```ts
-// astro.config.mjs
-sidebar: [
-    {
-        label: 'Main',
-        autogenerate: { directory: '/docs' },
-    },
-    {
-        label: 'Demos',
-        autogenerate: { directory: '/demos' },
-        badge: 'New',
-    },
-  ],
-```
-
-
 ### `multiSidebar`
 
 **Type:** `boolean | { switcherStyle: "dropdown" | "horizontalList" | "hidden" } | undefined`