diff --git a/src/client/theme-default/components/SideBarLink.ts b/src/client/theme-default/components/SideBarLink.ts
index 42ba5012..6fd16b37 100644
--- a/src/client/theme-default/components/SideBarLink.ts
+++ b/src/client/theme-default/components/SideBarLink.ts
@@ -15,7 +15,10 @@ export const SideBarLink: FunctionalComponent<{
   const route = useRoute()
   const { site, frontmatter } = useData()
   const depth = props.depth || 1
-  const maxDepth = frontmatter.value.sidebarDepth || Infinity
+  const maxDepth =
+    frontmatter.value.sidebarDepth ||
+    site.value.themeConfig.sidebarDepth ||
+    Infinity
 
   const headers = route.data.headers
   const text = props.item.text
diff --git a/src/client/theme-default/composables/sideBar.ts b/src/client/theme-default/composables/sideBar.ts
index 96fb6b24..7e40292e 100644
--- a/src/client/theme-default/composables/sideBar.ts
+++ b/src/client/theme-default/composables/sideBar.ts
@@ -15,7 +15,8 @@ export function useSideBar() {
     // at first, we'll check if we can find the sidebar setting in frontmatter.
     const headers = route.data.headers
     const frontSidebar = route.data.frontmatter.sidebar
-    const sidebarDepth = route.data.frontmatter.sidebarDepth
+    const sidebarDepth =
+      route.data.frontmatter.sidebarDepth || site.value.themeConfig.sidebarDepth
 
     // if it's `false`, we'll just return an empty array here.
     if (frontSidebar === false) {
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index d7284871..f4071a7b 100644
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@@ -3,6 +3,7 @@ export namespace DefaultTheme {
     logo?: string
     nav?: NavItem[] | false
     sidebar?: SideBarConfig | MultiSideBarConfig
+    sidebarDepth?: number
 
     /**
      * GitHub repository following the format <user>/<project>.