diff --git a/docs/guide/deploy.md b/docs/guide/deploy.md
index 423228b0ff1d..007e48166cfd 100644
--- a/docs/guide/deploy.md
+++ b/docs/guide/deploy.md
@@ -1,3 +1,7 @@
+---
+sidebarDepth: 3
+---
+
 # Deploying
 
 The following guides are based on some shared assumptions:
diff --git a/docs/guide/differences-from-vuepress.md b/docs/guide/differences-from-vuepress.md
index 6e0596916969..eefa0c1e8a5f 100644
--- a/docs/guide/differences-from-vuepress.md
+++ b/docs/guide/differences-from-vuepress.md
@@ -1,3 +1,6 @@
+---
+sidebarDepth: 2
+---
 # Differences from VuePress
 
 VitePress and VuePress have different [design goals](../index.md). Both projects share similar config naming conventions. VitePress aims to have the bare minimum features needed for authoring docs. Other features are pushed to Themes. On the other hand, VuePress has more features out-of-the-box or enabled by its ecosystem of plugins.
diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md
index 38d2e3d16e44..d4bd9d8553a5 100644
--- a/docs/guide/markdown.md
+++ b/docs/guide/markdown.md
@@ -1,3 +1,7 @@
+---
+sidebarDepth: 3
+---
+
 # Markdown Extensions
 
 ## Header Anchors
diff --git a/docs/guide/using-vue.md b/docs/guide/using-vue.md
index 504dfd63dd05..fae01ee2bbbf 100644
--- a/docs/guide/using-vue.md
+++ b/docs/guide/using-vue.md
@@ -1,3 +1,7 @@
+---
+sidebarDepth: 3
+---
+
 # Using Vue in Markdown
 
 In VitePress, each markdown file is compiled into HTML and then processed as a Vue Single-File Component. This means you can use any Vue features inside the markdown, including dynamic templating, using Vue components, or arbitrary in-page Vue component logic by adding a `<script>` tag.
diff --git a/docs/index.md b/docs/index.md
index 666c7e7c086f..8d8854c32853 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,5 +1,5 @@
 ---
-sidebarDepth: 1
+sidebarDepth: 2
 ---
 
 # What is VitePress?
diff --git a/src/client/theme-default/components/SideBarLink.ts b/src/client/theme-default/components/SideBarLink.ts
index 63570d61759c..755f526d05c0 100644
--- a/src/client/theme-default/components/SideBarLink.ts
+++ b/src/client/theme-default/components/SideBarLink.ts
@@ -10,16 +10,22 @@ interface HeaderWithChildren extends Header {
 
 export const SideBarLink: FunctionalComponent<{
   item: DefaultTheme.SideBarItem
+  depth?: number
 }> = (props) => {
   const route = useRoute()
-  const { site } = useData()
+  const { site, frontmatter } = useData()
+  const depth = props.depth || 1
+  const maxDepth = frontmatter.value.sidebarDepth || Infinity
 
   const headers = route.data.headers
   const text = props.item.text
   const link = resolveLink(site.value.base, props.item.link)
   const children = (props.item as DefaultTheme.SideBarGroup).children
   const active = isActive(route, props.item.link)
-  const childItems = createChildren(active, children, headers)
+  const childItems =
+    depth < maxDepth
+      ? createChildren(active, children, headers, depth + 1)
+      : null
 
   return h('li', { class: 'sidebar-link' }, [
     h(
@@ -50,20 +56,21 @@ function resolveLink(base: string, path?: string): string | undefined {
 function createChildren(
   active: boolean,
   children?: DefaultTheme.SideBarItem[],
-  headers?: Header[]
+  headers?: Header[],
+  depth = 1
 ): VNode | null {
   if (children && children.length > 0) {
     return h(
       'ul',
       { class: 'sidebar-links' },
       children.map((c) => {
-        return h(SideBarLink, { item: c })
+        return h(SideBarLink, { item: c, depth })
       })
     )
   }
 
   return active && headers
-    ? createChildren(false, resolveHeaders(headers))
+    ? createChildren(false, resolveHeaders(headers), undefined, depth)
     : null
 }