diff --git a/docs/.vuepress/components/VPSidebarItem.vue b/docs/.vuepress/components/VPSidebarItem.vue
index 332372538e..65e4d3e181 100644
--- a/docs/.vuepress/components/VPSidebarItem.vue
+++ b/docs/.vuepress/components/VPSidebarItem.vue
@@ -2,7 +2,10 @@
 import VPAutoLink from '@theme/VPAutoLink.vue'
 import VPDropdownTransition from '@theme/VPDropdownTransition.vue'
 import { isActiveSidebarItem } from '@theme/isActiveSidebarItem'
-import type { SidebarItem } from '@vuepress/theme-default/client'
+import type {
+  SidebarGroupItem,
+  SidebarItem,
+} from '@vuepress/theme-default/client'
 import { useToggle } from '@vueuse/core'
 import { computed, nextTick, onBeforeUnmount, toRefs } from 'vue'
 import { useRoute, useRouter } from 'vuepress/client'
@@ -25,9 +28,7 @@ const { item, depth } = toRefs(props)
 const route = useRoute()
 const router = useRouter()
 
-const collapsible = computed(
-  () => 'collapsible' in item.value && item.value.collapsible,
-)
+const collapsible = computed(() => (item.value as SidebarGroupItem).collapsible)
 const isActive = computed(() => isActiveSidebarItem(item.value, route))
 const itemClass = computed(() => ({
   'vp-sidebar-item': true,
@@ -62,7 +63,15 @@ onBeforeUnmount(() => {
 
 <template>
   <li>
-    <VPAutoLink v-if="item.link" :class="itemClass" :config="item" />
+    <VPAutoLink v-if="item.link" :class="itemClass" :config="item">
+      <template #after>
+        <span
+          v-if="collapsible"
+          class="arrow"
+          :class="isOpen ? 'down' : 'right'"
+        />
+      </template>
+    </VPAutoLink>
     <p
       v-else
       tabindex="0"
diff --git a/docs/plugins/development/toc.md b/docs/plugins/development/toc.md
index 4681be5e22..826969c0bd 100644
--- a/docs/plugins/development/toc.md
+++ b/docs/plugins/development/toc.md
@@ -61,7 +61,17 @@ Therefore, this plugin is more useful for theme developers.
 
   Specify the name of the TOC component.
 
-### defaultPropsOptions
+### headersOptions
+
+- Type: `Partial<GetHeadersOptions>`
+
+- Default: `{}`
+
+- Details:
+
+  Override the default values of the component [headersOptions](#headersoptions-1) prop.
+
+### propsOptions
 
 - Type: `Partial<TocPropsOptions>`
 
@@ -69,7 +79,7 @@ Therefore, this plugin is more useful for theme developers.
 
 - Details:
 
-  Override the default values of the component [options](#options-1) prop.
+  Override the default values of the component [propsOptions](#propsoptions-1) prop.
 
 ## Component Props
 
@@ -100,7 +110,21 @@ interface PageHeader {
 
   If this prop is not specified, the headers of current page will be used.
 
-### options
+### headersOptions
+
+- Type: `Partial<GetHeadersOptions>`
+
+  See [GetHeadersOptions](../../tools/helper/client.md#getheaders)
+
+- Default:
+
+  See [GetHeadersOptions](../../tools/helper/client.md#getheaders), it can be overridden by [headersOptions](#headaersoptions) in plugin options.
+
+- Details:
+
+  Customize header extracting behavior.
+
+### propsOptions
 
 - Type: `Partial<TocPropsOptions>`
 
@@ -119,7 +143,7 @@ interface TocPropsOptions {
 
 - Default:
 
-  Following default values can be overridden by [defaultPropsOptions](#defaultpropsoptions).
+  Following default values can be overridden by [propsOptions](#propsoptions) in plugin options.
 
 ```ts
 const defaultOptions = {
@@ -136,7 +160,7 @@ const defaultOptions = {
 
 - Details:
 
-  Customize the TOC component.
+  Customize TOC component render behavior.
 
   If the `containerTag` is set to an empty string `''`, the `<nav>` container will be removed totally.
 
diff --git a/docs/zh/plugins/development/toc.md b/docs/zh/plugins/development/toc.md
index 8a78292c60..ba90be11ad 100644
--- a/docs/zh/plugins/development/toc.md
+++ b/docs/zh/plugins/development/toc.md
@@ -61,7 +61,17 @@ Markdown 语法 `[[toc]]` 仅能在 Markdown 文件中使用。它是由 markdow
 
   指定目录组件的名称。
 
-### defaultPropsOptions
+### headerOptions
+
+- 类型： `Partial<GetHeadersOptions>`
+
+- 默认值： `{}`
+
+- 详情：
+
+  覆盖组件 [headerOptions](#headeroptions-1) Prop 的默认值。
+
+### propsOptions
 
 - 类型： `Partial<TocPropsOptions>`
 
@@ -69,7 +79,7 @@ Markdown 语法 `[[toc]]` 仅能在 Markdown 文件中使用。它是由 markdow
 
 - 详情：
 
-  覆盖组件 [options](#options) Prop 的默认值。
+  覆盖组件 [propsOptions](#propsoptions-1) Prop 的默认值。
 
 ## 组件 Props
 
@@ -100,7 +110,21 @@ interface PageHeader {
 
   如果该 Prop 没有被设置，默认会使用当前页面的标题。
 
-### options
+### headerOptions
+
+- 类型： `Partial<GetHeadersOptions>`
+
+  详见 [GetHeadersOptions](../../tools/helper/client.md#getheaders)
+
+- 默认值：
+
+  详见 [GetHeadersOptions](../../tools/helper/client.md#getheaders)，可以通过插件选项中的 [headerOptions](#headeroptions) 来覆盖。
+
+- 详情：
+
+  覆盖 [getHeaders](../../tools/helper/client.md#getheaders) 函数的默认值。
+
+### propsOptions
 
 - 类型： `Partial<TocPropsOptions>`
 
@@ -119,7 +143,7 @@ interface TocPropsOptions {
 
 - 默认值：
 
-  下列默认值可以用过 [defaultPropsOptions](#defaultpropsoptions) 来覆盖：
+  下列默认值可以用过插件选项中的 [propsOptions](#propsoptions) 来覆盖：
 
 ```ts
 const defaultOptions = {
@@ -136,7 +160,7 @@ const defaultOptions = {
 
 - 详情：
 
-  自定义目录组件。
+  自定义目录组件渲染行为。
 
   如果 `containerTag` 设置为空字符串 `''` ，那么最外层的 `<nav>` Container 会被完全移除。
 
diff --git a/plugins/development/plugin-toc/package.json b/plugins/development/plugin-toc/package.json
index ee45837c20..1b76a17ca0 100644
--- a/plugins/development/plugin-toc/package.json
+++ b/plugins/development/plugin-toc/package.json
@@ -36,6 +36,7 @@
     "clean": "rimraf --glob ./lib ./*.tsbuildinfo"
   },
   "dependencies": {
+    "@vuepress/helper": "workspace:*",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },
diff --git a/plugins/development/plugin-toc/src/client/components/Toc.ts b/plugins/development/plugin-toc/src/client/components/Toc.ts
index 6d98f59067..f7d0614a2c 100644
--- a/plugins/development/plugin-toc/src/client/components/Toc.ts
+++ b/plugins/development/plugin-toc/src/client/components/Toc.ts
@@ -1,16 +1,19 @@
+import type { GetHeadersOptions } from '@vuepress/helper/client'
+import { useHeaders } from '@vuepress/helper/client'
 import type { PropType, VNode } from 'vue'
 import { computed, defineComponent, h, toRefs } from 'vue'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import { RouterLink } from 'vue-router'
 import type { PageHeader } from 'vuepress/client'
-import { RouteLink, usePageData, useRoute } from 'vuepress/client'
+import { RouteLink, useRoute } from 'vuepress/client'
 import type { TocPropsOptions } from '../../shared/index.js'
 
 export type TocPropsHeaders = PageHeader[]
 
 export interface TocProps {
   headers: TocPropsHeaders
-  options: TocPropsOptions
+  headersOptions: GetHeadersOptions
+  propsOptions: TocPropsOptions
 }
 
 const renderLink = (
@@ -104,24 +107,28 @@ export const Toc = defineComponent({
   name: 'Toc',
 
   props: {
-    headers: Array as PropType<TocPropsHeaders | undefined>,
-
-    options: Object as PropType<Partial<TocPropsOptions>>,
+    /**
+     * Headers to render the table of contents
+     */
+    headers: Array as PropType<TocPropsHeaders>,
+
+    /**
+     * Get headers options
+     */
+    headersOptions: Object as PropType<GetHeadersOptions>,
+
+    /**
+     * TOC prop options
+     */
+    propsOptions: Object as PropType<Partial<TocPropsOptions>>,
   },
 
   setup(props) {
-    const { headers: propsHeaders, options: propsOptions } = toRefs(props)
+    const { headers, headersOptions, propsOptions } = toRefs(props)
 
+    const pageHeaders = useHeaders(headersOptions)
     const route = useRoute()
-    const page = usePageData()
-    const headers = computed<TocPropsHeaders>(() => {
-      const headersToUse = propsHeaders.value ?? page.value.headers
-
-      // skip h1 header
-      return headersToUse[0]?.level === 1
-        ? headersToUse[0].children
-        : headersToUse
-    })
+
     const options = computed<TocPropsOptions>(() => ({
       containerTag: 'nav',
       containerClass: 'vuepress-toc',
@@ -135,7 +142,11 @@ export const Toc = defineComponent({
     }))
 
     return () => {
-      const renderedHeaders = renderHeaders(headers.value, options.value, route)
+      const renderedHeaders = renderHeaders(
+        headers.value ?? pageHeaders.value,
+        options.value,
+        route,
+      )
 
       if (options.value.containerTag) {
         return h(
diff --git a/plugins/development/plugin-toc/src/client/config.ts b/plugins/development/plugin-toc/src/client/config.ts
index 260e3da5f2..207b7f8adf 100644
--- a/plugins/development/plugin-toc/src/client/config.ts
+++ b/plugins/development/plugin-toc/src/client/config.ts
@@ -1,3 +1,4 @@
+import type { GetHeadersOptions } from '@vuepress/helper/client'
 import { h } from 'vue'
 import { defineClientConfig } from 'vuepress/client'
 import type { TocPropsOptions } from '../shared/index.js'
@@ -5,9 +6,8 @@ import type { TocProps } from './components/Toc.js'
 import { Toc } from './components/Toc.js'
 
 declare const __TOC_COMPONENT_NAME__: string
-declare const __TOC_DEFAULT_PROPS_OPTIONS__: TocPropsOptions
-
-const defaultPropsOptions = __TOC_DEFAULT_PROPS_OPTIONS__
+declare const __TOC_HEADERS_OPTIONS__: GetHeadersOptions
+declare const __TOC_PROPS_OPTIONS__: TocPropsOptions
 
 export default defineClientConfig({
   enhance({ app }) {
@@ -15,9 +15,13 @@ export default defineClientConfig({
     app.component(__TOC_COMPONENT_NAME__, (props: TocProps) =>
       h(Toc, {
         headers: props.headers,
-        options: {
-          ...defaultPropsOptions,
-          ...props.options,
+        headersOptions: {
+          ...__TOC_HEADERS_OPTIONS__,
+          ...props.headersOptions,
+        },
+        propsOptions: {
+          ...__TOC_PROPS_OPTIONS__,
+          ...props.propsOptions,
         },
       }),
     )
diff --git a/plugins/development/plugin-toc/src/node/index.ts b/plugins/development/plugin-toc/src/node/index.ts
index ad60c3c175..2fd1d97773 100644
--- a/plugins/development/plugin-toc/src/node/index.ts
+++ b/plugins/development/plugin-toc/src/node/index.ts
@@ -1,2 +1,3 @@
+export type * from './options.js'
 export * from './tocPlugin.js'
 export type * from '../shared/index.js'
diff --git a/plugins/development/plugin-toc/src/node/options.ts b/plugins/development/plugin-toc/src/node/options.ts
new file mode 100644
index 0000000000..334157e05a
--- /dev/null
+++ b/plugins/development/plugin-toc/src/node/options.ts
@@ -0,0 +1,30 @@
+import type { GetHeadersOptions } from '@vuepress/helper'
+import type { TocPropsOptions } from '../shared/index.js'
+
+/**
+ * Options for @vuepress/plugin-toc
+ */
+export interface TocPluginOptions {
+  /**
+   * Specify the name of the TOC component
+   *
+   * @default 'Toc'
+   */
+  componentName?: string
+
+  /**
+   * Default header options
+   */
+  headerOptions?: GetHeadersOptions
+
+  /**
+   * Default props options
+   */
+  propsOptions?: Partial<TocPropsOptions>
+
+  // FIXME: Remove in stable
+  /**
+   * @deprecated use `propsOptions` instead
+   */
+  defaultPropsOptions?: Partial<TocPropsOptions>
+}
diff --git a/plugins/development/plugin-toc/src/node/tocPlugin.ts b/plugins/development/plugin-toc/src/node/tocPlugin.ts
index dafe4761d6..4ba971ac38 100644
--- a/plugins/development/plugin-toc/src/node/tocPlugin.ts
+++ b/plugins/development/plugin-toc/src/node/tocPlugin.ts
@@ -1,29 +1,15 @@
 import type { Plugin } from 'vuepress/core'
 import { getDirname, path } from 'vuepress/utils'
-import type { TocPropsOptions } from '../shared/index.js'
+import type { TocPluginOptions } from './options.js'
 
 const __dirname = import.meta.dirname || getDirname(import.meta.url)
 
-/**
- * Options for @vuepress/plugin-toc
- */
-export interface TocPluginOptions {
-  /**
-   * Specify the name of the TOC component
-   *
-   * @default 'Toc'
-   */
-  componentName?: string
-
-  /**
-   * Override the default values of the `options` prop of the TOC component
-   */
-  defaultPropsOptions?: Partial<TocPropsOptions>
-}
-
 export const tocPlugin = ({
   componentName = 'Toc',
+  headerOptions = {},
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
   defaultPropsOptions = {},
+  propsOptions = defaultPropsOptions,
 }: TocPluginOptions = {}): Plugin => ({
   name: '@vuepress/plugin-toc',
 
@@ -31,6 +17,7 @@ export const tocPlugin = ({
 
   define: {
     __TOC_COMPONENT_NAME__: componentName,
-    __TOC_DEFAULT_PROPS_OPTIONS__: defaultPropsOptions,
+    __TOC_HEADERS_OPTIONS__: headerOptions,
+    __TOC_PROPS_OPTIONS__: propsOptions,
   },
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 673c6e1feb..ff6a7efbaf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -494,6 +494,9 @@ importers:
 
   plugins/development/plugin-toc:
     dependencies:
+      '@vuepress/helper':
+        specifier: workspace:*
+        version: link:../../../tools/helper
       vue:
         specifier: ^3.5.13
         version: 3.5.13(typescript@5.7.3)
diff --git a/themes/theme-default/src/client/components/VPDropdownTransition.vue b/themes/theme-default/src/client/components/VPDropdownTransition.vue
index 0915c21369..db1fe1e9bf 100644
--- a/themes/theme-default/src/client/components/VPDropdownTransition.vue
+++ b/themes/theme-default/src/client/components/VPDropdownTransition.vue
@@ -31,6 +31,13 @@ const unsetHeight = (item: Element): void => {
   &-enter-from,
   &-leave-to {
     height: 0 !important;
+    opacity: 0;
+  }
+
+  &-enter-active {
+    transition:
+      height 0.3s ease-in-out,
+      opacity 0.6s ease-out;
   }
 }
 </style>
diff --git a/themes/theme-default/src/client/components/VPFadeSlideYTransition.vue b/themes/theme-default/src/client/components/VPFadeSlideYTransition.vue
new file mode 100644
index 0000000000..cca37200dd
--- /dev/null
+++ b/themes/theme-default/src/client/components/VPFadeSlideYTransition.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { VNode } from 'vue'
+
+defineEmits<{
+  beforeEnter: []
+  beforeLeave: []
+}>()
+defineSlots<{
+  default: () => VNode | string | null
+}>()
+</script>
+
+<template>
+  <Transition
+    name="vp-fade-slide-y"
+    mode="out-in"
+    @before-enter="$emit('beforeEnter')"
+    @before-leave="$emit('beforeLeave')"
+  >
+    <slot />
+  </Transition>
+</template>
+
+<style lang="scss">
+/**
+ * fade-slide-y transition
+ */
+.vp-fade-slide-y {
+  &-enter-active {
+    transition: all 0.2s ease;
+  }
+
+  &-leave-active {
+    transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+</style>
diff --git a/themes/theme-default/src/client/components/VPSidebarItem.vue b/themes/theme-default/src/client/components/VPSidebarItem.vue
index be5be82fea..465bb9c415 100644
--- a/themes/theme-default/src/client/components/VPSidebarItem.vue
+++ b/themes/theme-default/src/client/components/VPSidebarItem.vue
@@ -5,7 +5,7 @@ import { isActiveSidebarItem } from '@theme/isActiveSidebarItem'
 import { useToggle } from '@vueuse/core'
 import { computed, nextTick, onBeforeUnmount, toRefs } from 'vue'
 import { useRoute, useRouter } from 'vuepress/client'
-import type { SidebarItem } from '../typings.js'
+import type { SidebarGroupItem, SidebarItem } from '../typings.js'
 
 const props = withDefaults(
   defineProps<{
@@ -25,9 +25,7 @@ const { item, depth } = toRefs(props)
 const route = useRoute()
 const router = useRouter()
 
-const collapsible = computed(
-  () => 'collapsible' in item.value && item.value.collapsible,
-)
+const collapsible = computed(() => (item.value as SidebarGroupItem).collapsible)
 const isActive = computed(() => isActiveSidebarItem(item.value, route))
 const itemClass = computed(() => ({
   'vp-sidebar-item': true,
@@ -62,7 +60,15 @@ onBeforeUnmount(() => {
 
 <template>
   <li>
-    <VPAutoLink v-if="item.link" :class="itemClass" :config="item" />
+    <VPAutoLink v-if="item.link" :class="itemClass" :config="item">
+      <template #after>
+        <span
+          v-if="collapsible"
+          class="arrow"
+          :class="isOpen ? 'down' : 'right'"
+        />
+      </template>
+    </VPAutoLink>
     <p
       v-else
       tabindex="0"
diff --git a/themes/theme-default/src/client/composables/useHeaders.ts b/themes/theme-default/src/client/composables/useHeaders.ts
index 1dd029aa8a..f7baa6cf0d 100644
--- a/themes/theme-default/src/client/composables/useHeaders.ts
+++ b/themes/theme-default/src/client/composables/useHeaders.ts
@@ -1,9 +1,10 @@
 import { useData } from '@theme/useData'
 import type { HeaderItem } from '@vuepress/helper/client'
 import { getHeaders } from '@vuepress/helper/client'
-import { injectLocal, provideLocal, watchImmediate } from '@vueuse/core'
+import { injectLocal, provideLocal } from '@vueuse/core'
 import type { InjectionKey, Ref } from 'vue'
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
+import { onContentUpdated } from 'vuepress/client'
 
 export type HeadersRef = Ref<HeaderItem[]>
 
@@ -22,7 +23,7 @@ export const useHeaders = (): HeadersRef => {
 }
 
 export const setupHeaders = (): void => {
-  const { frontmatter, routePath, themeLocale } = useData()
+  const { frontmatter, themeLocale } = useData()
 
   const headersRef: HeadersRef = ref([])
   const levels = computed(
@@ -43,7 +44,8 @@ export const setupHeaders = (): void => {
 
   provideLocal(headersSymbol, headersRef)
 
-  onMounted(() => {
-    watchImmediate([levels, routePath], updateHeaders)
+  onContentUpdated((reason) => {
+    if (reason === 'beforeUnmount') headersRef.value = []
+    else updateHeaders()
   })
 }
diff --git a/themes/theme-default/src/client/composables/useSidebarItems.ts b/themes/theme-default/src/client/composables/useSidebarItems.ts
index 4a0295278b..d51aa5af8b 100644
--- a/themes/theme-default/src/client/composables/useSidebarItems.ts
+++ b/themes/theme-default/src/client/composables/useSidebarItems.ts
@@ -1,6 +1,7 @@
 import { resolveAutoLink } from '@theme/resolveAutoLink'
 import { resolvePrefix } from '@theme/resolvePrefix'
 import { useData } from '@theme/useData'
+import { useHeaders } from '@theme/useHeaders'
 import { isLinkRelative, keys, startsWith } from '@vuepress/helper/client'
 import type { ComputedRef, InjectionKey } from 'vue'
 import { computed, inject, provide } from 'vue'
@@ -183,6 +184,7 @@ export const setupSidebarItems = (): void => {
   const { frontmatter, page, routeLocale, themeLocale } = useData<
     DefaultThemeHomePageFrontmatter | DefaultThemeNormalPageFrontmatter
   >()
+  const headers = useHeaders()
   const routePath = useRoutePath()
 
   const sidebarConfig = computed<SidebarOptions | false>(() =>
@@ -199,7 +201,7 @@ export const setupSidebarItems = (): void => {
       page.value,
       routePath.value,
       routeLocale.value,
-      page.value.headers,
+      headers.value,
     ),
   )
   provide(sidebarItemsSymbol, sidebarItems)
diff --git a/themes/theme-default/src/client/config.ts b/themes/theme-default/src/client/config.ts
index d54660b071..498b8b3cf5 100644
--- a/themes/theme-default/src/client/config.ts
+++ b/themes/theme-default/src/client/config.ts
@@ -1,4 +1,5 @@
 import { setupDarkMode } from '@theme/useDarkMode'
+import { setupHeaders } from '@theme/useHeaders'
 import { useScrollPromise } from '@theme/useScrollPromise'
 import { setupSidebarItems } from '@theme/useSidebarItems'
 import { hasGlobalComponent } from '@vuepress/helper/client'
@@ -25,6 +26,7 @@ export default defineClientConfig({
 
   setup() {
     setupDarkMode()
+    setupHeaders()
     setupSidebarItems()
   },
 
diff --git a/themes/theme-default/src/client/layouts/Layout.vue b/themes/theme-default/src/client/layouts/Layout.vue
index 67c22f4534..758052b790 100644
--- a/themes/theme-default/src/client/layouts/Layout.vue
+++ b/themes/theme-default/src/client/layouts/Layout.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import VPFadeSlideYTransition from '@theme/VPFadeSlideYTransition.vue'
 import VPHome from '@theme/VPHome.vue'
 import VPNavbar from '@theme/VPNavbar.vue'
 import VPPage from '@theme/VPPage.vue'
@@ -120,16 +121,12 @@ const onBeforeLeave = scrollPromise.pending
     </slot>
 
     <slot name="page">
-      <VPHome v-if="frontmatter.home" />
-
-      <Transition
-        v-else
-        name="fade-slide-y"
-        mode="out-in"
+      <VPFadeSlideYTransition
         @before-enter="onBeforeEnter"
         @before-leave="onBeforeLeave"
       >
-        <VPPage :key="page.path">
+        <VPHome v-if="frontmatter.home" />
+        <VPPage v-else :key="page.path">
           <template #top>
             <slot name="page-top" />
           </template>
@@ -143,7 +140,7 @@ const onBeforeLeave = scrollPromise.pending
             <slot name="page-bottom" />
           </template>
         </VPPage>
-      </Transition>
+      </VPFadeSlideYTransition>
     </slot>
   </div>
 </template>
@@ -222,23 +219,4 @@ const onBeforeLeave = scrollPromise.pending
     }
   }
 }
-
-/**
- * fade-slide-y transition
- */
-.fade-slide-y {
-  &-enter-active {
-    transition: all 0.2s ease;
-  }
-
-  &-leave-active {
-    transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
-  }
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-}
 </style>
diff --git a/themes/theme-default/src/client/styles/layout.scss b/themes/theme-default/src/client/styles/layout.scss
index 4c48e7a1ee..d08cbc3cff 100644
--- a/themes/theme-default/src/client/styles/layout.scss
+++ b/themes/theme-default/src/client/styles/layout.scss
@@ -1,5 +1,9 @@
 @use 'variables' as *;
 
+:root {
+  scroll-behavior: smooth;
+}
+
 .vp-hide-mobile {
   @media screen and (max-width: $MQMobile) {
     display: none;
diff --git a/tools/helper/src/client/composables/index.ts b/tools/helper/src/client/composables/index.ts
index d857cf8c4a..902d48ac88 100644
--- a/tools/helper/src/client/composables/index.ts
+++ b/tools/helper/src/client/composables/index.ts
@@ -1,4 +1,5 @@
 export * from './useDarkMode.js'
+export * from './useHeaders.js'
 export * from './useLocaleConfig.js'
 export * from './useKeys.js'
 export * from './useRoutePaths.js'
diff --git a/tools/helper/src/client/composables/useHeaders.ts b/tools/helper/src/client/composables/useHeaders.ts
new file mode 100644
index 0000000000..e7eacbfd42
--- /dev/null
+++ b/tools/helper/src/client/composables/useHeaders.ts
@@ -0,0 +1,24 @@
+import type { HeaderItem } from '@vuepress/helper/client'
+import { getHeaders } from '@vuepress/helper/client'
+import type { MaybeRef, Ref } from 'vue'
+import { ref, toValue } from 'vue'
+import { onContentUpdated } from 'vuepress/client'
+import type { GetHeadersOptions } from '../../shared/index.js'
+
+export type HeadersRef = Ref<HeaderItem[]>
+
+/**
+ * Inject headers
+ */
+export const useHeaders = (
+  options: MaybeRef<GetHeadersOptions | undefined> = {},
+): HeadersRef => {
+  const headersRef: HeadersRef = ref([])
+
+  onContentUpdated((reason) => {
+    headersRef.value =
+      reason === 'beforeUnmount' ? [] : getHeaders(toValue(options))
+  })
+
+  return headersRef
+}
diff --git a/tools/helper/src/client/utils/getHeaders.ts b/tools/helper/src/client/utils/getHeaders.ts
index 3a51147afe..fc642c5e0f 100644
--- a/tools/helper/src/client/utils/getHeaders.ts
+++ b/tools/helper/src/client/utils/getHeaders.ts
@@ -1,14 +1,13 @@
 import type { PageHeader } from 'vuepress/shared'
+import type { GetHeadersOptions, HeaderLevels } from '../../shared/index.js'
 
 const DEFAULT_HEADER_SELECTOR = [...new Array<undefined>(6)]
   .map((_, i) => `[vp-content] h${i + 1}`)
   .join(',')
 
-export type HeaderLevels = number | 'deep' | false | [number, number]
-
 export type HeaderItem = Omit<PageHeader, 'children'> & {
   element: HTMLHeadingElement
-  children?: HeaderItem[]
+  children: HeaderItem[]
 }
 
 export const resolveHeaders = (
@@ -41,7 +40,7 @@ export const resolveHeaders = (
       for (let j = i - 1; j >= 0; j--) {
         const prev = allowedHeaders[j]
         if (prev.level < current.level) {
-          ;(prev.children ??= []).push(current)
+          prev.children.push(current)
           continue outer
         }
       }
@@ -82,41 +81,9 @@ export const getHeadersFromDom = (
       link: `#${el.id}`,
       slug: el.id,
       level: Number(el.tagName[1]),
+      children: [],
     }))
 
-export interface GetHeadersOptions {
-  /**
-   * The selector of the headers.
-   *
-   * It will be passed as an argument to `document.querySelectorAll(selector)`,
-   * so you should pass a `CSS Selector` string.
-   *
-   * @default '[vp-content] h1, [vp-content] h2, [vp-content] h3, [vp-content] h4, [vp-content] h5, [vp-content] h6'
-   */
-  selector?: string
-  /**
-   * Ignore specific elements within the header.
-   *
-   * The Array of `CSS Selector`
-   *
-   * @default []
-   */
-  ignore?: string[]
-  /**
-   * The levels of the headers.
-   *
-   * `1` to `6` for `<h1>` to `<h6>`
-   *
-   * - `false`: No headers.
-   * - `number`: only headings of that level will be displayed.
-   * - `[number, number]: headings level tuple, where the first number should be less than the second number, for example, `[2, 4]` which means all headings from `<h2>` to `<h4>` will be displayed.
-   * - `deep`: same as `[2, 6]`, which means all headings from `<h2>` to `<h6>` will be displayed.
-   *
-   * @default 2
-   */
-  levels?: HeaderLevels
-}
-
 /**
  * Get headers of current page.
  */
diff --git a/tools/helper/src/shared/header.ts b/tools/helper/src/shared/header.ts
new file mode 100644
index 0000000000..3742fa8812
--- /dev/null
+++ b/tools/helper/src/shared/header.ts
@@ -0,0 +1,34 @@
+export type HeaderLevels = number | 'deep' | false | [number, number]
+
+export interface GetHeadersOptions {
+  /**
+   * The selector of the headers.
+   *
+   * It will be passed as an argument to `document.querySelectorAll(selector)`,
+   * so you should pass a `CSS Selector` string.
+   *
+   * @default '[vp-content] h1, [vp-content] h2, [vp-content] h3, [vp-content] h4, [vp-content] h5, [vp-content] h6'
+   */
+  selector?: string
+  /**
+   * Ignore specific elements within the header.
+   *
+   * The Array of `CSS Selector`
+   *
+   * @default []
+   */
+  ignore?: string[]
+  /**
+   * The levels of the headers.
+   *
+   * `1` to `6` for `<h1>` to `<h6>`
+   *
+   * - `false`: No headers.
+   * - `number`: only headings of that level will be displayed.
+   * - `[number, number]: headings level tuple, where the first number should be less than the second number, for example, `[2, 4]` which means all headings from `<h2>` to `<h4>` will be displayed.
+   * - `deep`: same as `[2, 6]`, which means all headings from `<h2>` to `<h6>` will be displayed.
+   *
+   * @default 2
+   */
+  levels?: HeaderLevels
+}
diff --git a/tools/helper/src/shared/index.ts b/tools/helper/src/shared/index.ts
index 15693912c1..4323729154 100644
--- a/tools/helper/src/shared/index.ts
+++ b/tools/helper/src/shared/index.ts
@@ -1,5 +1,6 @@
 export * from './deepAssign.js'
 export * from './date.js'
+export type * from './header.js'
 export * from './helper.js'
 export * from './link.js'
 export type * from './locales.js'