diff --git a/docs/reference/default-theme-config.md b/docs/reference/default-theme-config.md
index 9b078eae..321b7d3b 100644
--- a/docs/reference/default-theme-config.md
+++ b/docs/reference/default-theme-config.md
@@ -66,7 +66,7 @@ export default {
 
 The configuration for the nav menu item. More details in [Default Theme: Nav](./default-theme-nav#navigation-links).
 
-```js
+```ts
 export default {
   themeConfig: {
     nav: [
@@ -113,7 +113,7 @@ interface NavItemWithChildren {
 
 The configuration for the sidebar menu item. More details in [Default Theme: Sidebar](./default-theme-sidebar).
 
-```js
+```ts
 export default {
   themeConfig: {
     sidebar: [
@@ -174,26 +174,33 @@ Setting this value to `false` prevents rendering of aside container.\
 Setting this value to `true` renders the aside to the right.\
 Setting this value to `left` renders the aside to the left.
 
-## outline
+If you want to disable it for all viewports, you should use `outline: false` instead.
 
-- Type: `number | [number, number] | 'deep' | false`
-- Default: `2`
-- Can be overridden per page via [frontmatter](./frontmatter-config#outline)
-
-The levels of header to display in the outline. You can specify a particular level by passing a number, or you can provide a level range by passing a tuple containing the bottom and upper limits. When passing `'deep'` which equals `[2, 6]`, all header levels are shown in the outline except `h1`. Set `false` to hide outline.
+## outline
 
-## outlineTitle
+- Type: `Outline | Outline['level'] | false`
+- Level can be overridden per page via [frontmatter](./frontmatter-config#outline)
 
-- Type: `string`
-- Default: `On this page`
+Setting this value to `false` prevents rendering of outline container. Refer this interface for more details:
 
-Can be used to customize the title of the right sidebar (on the top of outline links). This is useful when writing documentation in another language.
+```ts
+interface Outline {
+  /**
+   * The levels of headings to be displayed in the outline.
+   * Single number means only headings of that level will be displayed.
+   * If a tuple is passed, the first number is the minimum level and the second number is the maximum level.
+   * `'deep'` is same as `[2, 6]`, which means all headings from `<h2>` to `<h6>` will be displayed.
+   *
+   * @default 2
+   */
+  level?: number | [number, number] | 'deep'
 
-```js
-export default {
-  themeConfig: {
-    outlineTitle: 'In hac pagina'
-  }
+  /**
+   * The title to be displayed on the outline.
+   *
+   * @default 'On this page'
+   */
+  label?: string
 }
 ```
 
@@ -203,7 +210,7 @@ export default {
 
 You may define this option to show your social account links with icons in nav.
 
-```js
+```ts
 export default {
   themeConfig: {
     socialLinks: [
@@ -275,7 +282,7 @@ export interface Footer {
 
 Edit Link lets you display a link to edit the page on Git management services such as GitHub, or GitLab. See [Default Theme: Edit Link](./default-theme-edit-link) for more details.
 
-```js
+```ts
 export default {
   themeConfig: {
     editLink: {
@@ -374,7 +381,7 @@ Learn more in [Default Theme: Carbon Ads](./default-theme-carbon-ads)
 
 Can be used to customize text appearing above previous and next links. Helpful if not writing docs in English. Also can be used to disable prev/next links globally. If you want to selectively enable/disable prev/next links, you can use [frontmatter](./default-theme-prev-next-links).
 
-```js
+```ts
 export default {
   themeConfig: {
     docFooter: {
diff --git a/docs/reference/frontmatter-config.md b/docs/reference/frontmatter-config.md
index 28da1383..ed4ddf37 100644
--- a/docs/reference/frontmatter-config.md
+++ b/docs/reference/frontmatter-config.md
@@ -159,7 +159,7 @@ aside: false
 - Type: `number | [number, number] | 'deep' | false`
 - Default: `2`
 
-The levels of header in the outline to display for the page. It's same as [config.themeConfig.outline](./default-theme-config#outline), and it overrides the theme config.
+The levels of header in the outline to display for the page. It's same as [config.themeConfig.outline.level](./default-theme-config#outline), and it overrides the value set in site-level config.
 
 ### lastUpdated
 
diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index 303b518a..4d007aa6 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -31,7 +31,7 @@ const classes = ref<Record<string, boolean>>({})
 watchPostEffect(() => {
   classes.value = {
     'has-sidebar': hasSidebar.value,
-    top: frontmatter.value?.layout === 'home' && y.value === 0,
+    top: frontmatter.value.layout === 'home' && y.value === 0,
   }
 })
 </script>