diff --git a/package.json b/package.json
index 6101b1c..48fb90e 100644
--- a/package.json
+++ b/package.json
@@ -51,11 +51,11 @@
     "@types/node": "^18.15.3",
     "prettier": "^2.7.1",
     "typescript": "^4.9.5",
-    "vitepress": "^1.0.0-alpha.58",
+    "vitepress": "^1.0.0-alpha.60",
     "vue": "^3.2.47"
   },
   "peerDependencies": {
-    "vitepress": "^1.0.0-alpha.58"
+    "vitepress": "^1.0.0-alpha.60"
   },
   "pnpm": {
     "peerDependencyRules": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index baa1b0d..ef3deff 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,7 +12,7 @@ specifiers:
   normalize.css: ^8.0.1
   prettier: ^2.7.1
   typescript: ^4.9.5
-  vitepress: ^1.0.0-alpha.58
+  vitepress: ^1.0.0-alpha.60
   vue: ^3.2.47
 
 dependencies:
@@ -29,7 +29,7 @@ devDependencies:
   '@types/node': 18.15.3
   prettier: 2.7.1
   typescript: 4.9.5
-  vitepress: 1.0.0-alpha.58_@types+node@18.15.3
+  vitepress: 1.0.0-alpha.60_@types+node@18.15.3
   vue: 3.2.47
 
 packages:
@@ -830,8 +830,8 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vitepress/1.0.0-alpha.58_@types+node@18.15.3:
-    resolution: {integrity: sha512-aENSAiE2uKMoQPwBTELY8Nig5qSWrmAl+MgsO3l/TE8At6kXii+2rseEId/bVfT700JeucYdqtCgWxu+LwpYIw==}
+  /vitepress/1.0.0-alpha.60_@types+node@18.15.3:
+    resolution: {integrity: sha512-GI5iLDkZRqGEPixbSloT+p6pbKcMh9ykRRxt8vf9AjV1gaPit6Stg/t9WNxTdIhKVCuQMexGs1605DNApSRK2A==}
     hasBin: true
     dependencies:
       '@docsearch/css': 3.3.3
diff --git a/src/vitepress/components/VPContentDocOutline.vue b/src/vitepress/components/VPContentDocOutline.vue
index 3823df7..50132d4 100644
--- a/src/vitepress/components/VPContentDocOutline.vue
+++ b/src/vitepress/components/VPContentDocOutline.vue
@@ -1,25 +1,15 @@
 <script setup lang="ts">
-import { useData } from 'vitepress'
-import { resolveHeaders, useActiveAnchor } from '../composables/outline'
-import { computed, inject, ref } from 'vue'
+import { useActiveAnchor, useOutlineHeaders } from '../composables/outline'
+import { ref } from 'vue'
 import { useConfig } from '../composables/config'
+import VPDocOutlineItem from './VPDocOutlineItem.vue'
 
-const { page, frontmatter } = useData()
 const { config } = useConfig()
 const container = ref()
 const marker = ref()
-useActiveAnchor(container, marker)
-
-const filterHeaders = inject('filter-headers', null) as any
-const filteredHeaders = computed(() => {
-  return resolveHeaders(page.value.headers, filterHeaders)
-})
+const headers = useOutlineHeaders()
 
-const handleClick = ({ target: el }: Event) => {
-  const id = '#' + (el as HTMLAnchorElement).href!.split('#')[1]
-  const heading = document.querySelector(id) as HTMLAnchorElement
-  heading?.focus()
-}
+useActiveAnchor(container, marker)
 </script>
 
 <template>
@@ -30,26 +20,7 @@ const handleClick = ({ target: el }: Event) => {
       <span id="doc-outline-aria-label" class="visually-hidden">{{
         config.i18n?.ariaToC ?? 'Table of Contents for current page'
       }}</span>
-      <ul class="root">
-        <li
-          v-for="{ text, link, children, hidden } in filteredHeaders"
-          v-show="!hidden"
-        >
-          <a class="outline-link" :href="link" @click="handleClick">{{
-            text
-          }}</a>
-          <ul v-if="children && frontmatter.outline === 'deep'">
-            <li v-for="{ text, link, hidden } in children" v-show="!hidden">
-              <a
-                class="outline-link nested"
-                :href="link"
-                @click="handleClick"
-                >{{ text }}</a
-              >
-            </li>
-          </ul>
-        </li>
-      </ul>
+      <VPDocOutlineItem :headers="headers" />
     </nav>
   </div>
 </template>
@@ -69,26 +40,6 @@ const handleClick = ({ target: el }: Event) => {
   letter-spacing: 0.4px;
 }
 
-.outline-link {
-  color: var(--vt-c-text-2);
-  transition: color 0.5s;
-  line-height: 28px;
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.outline-link:hover,
-.outline-link.active {
-  color: var(--vt-c-text-1);
-  transition: color 0.25s;
-}
-
-.outline-link.nested {
-  padding-left: 1em;
-}
-
 .outline-marker {
   opacity: 0;
   position: absolute;
@@ -102,9 +53,4 @@ const handleClick = ({ target: el }: Event) => {
   transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), opacity 0.25s,
     background-color 0.5s;
 }
-
-.root {
-  z-index: 1;
-  position: relative;
-}
 </style>
diff --git a/src/vitepress/components/VPDocOutlineItem.vue b/src/vitepress/components/VPDocOutlineItem.vue
new file mode 100644
index 0000000..2f664a8
--- /dev/null
+++ b/src/vitepress/components/VPDocOutlineItem.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import type { MenuItemWithLinkAndChildren } from '../composables/outline.js'
+
+defineProps<{
+  headers: MenuItemWithLinkAndChildren[]
+  nested?: boolean
+}>()
+
+const { frontmatter } = useData()
+
+function onClick({ target: el }: Event) {
+  const id = '#' + (el as HTMLAnchorElement).href!.split('#')[1]
+  const heading = document.querySelector<HTMLAnchorElement>(
+    decodeURIComponent(id)
+  )
+  heading?.focus()
+}
+</script>
+
+<template>
+  <ul :class="nested ? 'nested' : 'root'">
+    <li v-for="{ children, link, text, hidden } in headers" v-show="!hidden">
+      <a class="outline-link" :href="link" @click="onClick">{{ text }}</a>
+      <template v-if="children?.length && frontmatter.outline === 'deep'">
+        <VPDocOutlineItem :headers="children" :nested="true" />
+      </template>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.root {
+  position: relative;
+  z-index: 1;
+}
+
+.nested {
+  padding-left: 1em;
+}
+
+.outline-link {
+  color: var(--vt-c-text-2);
+  transition: color 0.5s;
+  line-height: 28px;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.outline-link:hover,
+.outline-link.active {
+  color: var(--vt-c-text-1);
+  transition: color 0.25s;
+}
+</style>
diff --git a/src/vitepress/components/VPLocalNav.vue b/src/vitepress/components/VPLocalNav.vue
index 671ece7..1243364 100644
--- a/src/vitepress/components/VPLocalNav.vue
+++ b/src/vitepress/components/VPLocalNav.vue
@@ -1,18 +1,13 @@
 <script lang="ts" setup>
 import { VTIconAlignLeft } from '../../core'
 import { useSidebar } from '../composables/sidebar'
-import { useData } from 'vitepress'
 import { useConfig } from '../composables/config'
+import VPLocalNavOutlineDropdown from './VPLocalNavOutlineDropdown.vue';
 
 defineProps<{ open: boolean }>()
 
 const { hasSidebar } = useSidebar()
-const { frontmatter } = useData()
 const { config } = useConfig()
-
-function scrollToTop() {
-  window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
-}
 </script>
 
 <template>
@@ -27,13 +22,7 @@ function scrollToTop() {
       <span class="menu-text">{{ config.i18n?.menu || 'Menu' }}</span>
     </button>
 
-    <a
-      v-if="frontmatter.returnToTop !== false"
-      class="top-link"
-      href="#"
-      @click="scrollToTop"
-      >{{ config.i18n?.returnToTop ?? 'Return to top' }}</a
-    >
+    <VPLocalNavOutlineDropdown />
   </div>
 </template>
 
diff --git a/src/vitepress/components/VPLocalNavOutlineDropdown.vue b/src/vitepress/components/VPLocalNavOutlineDropdown.vue
new file mode 100644
index 0000000..9dc8255
--- /dev/null
+++ b/src/vitepress/components/VPLocalNavOutlineDropdown.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { ref, nextTick } from 'vue'
+import { useConfig } from '../composables/config'
+import { useOutlineHeaders } from '../composables/outline.js'
+import VPDocOutlineItem from './VPDocOutlineItem.vue'
+import { onContentUpdated } from 'vitepress'
+import VPIconChevronRight from '../../core/components/icons/VTIconChevronRight.vue'
+
+const { config } = useConfig()
+const open = ref(false)
+const vh = ref(0)
+const items = ref<HTMLDivElement>()
+
+const headers = useOutlineHeaders()
+
+onContentUpdated(() => {
+  open.value = false
+})
+
+function toggle() {
+  open.value = !open.value
+  vh.value = window.innerHeight + Math.min(window.scrollY - 64, 0)
+}
+
+function onItemClick(e: Event) {
+  if ((e.target as HTMLElement).classList.contains('outline-link')) {
+    // disable animation on hash navigation when page jumps
+    if (items.value) {
+      items.value.style.transition = 'none'
+    }
+    nextTick(() => {
+      open.value = false
+    })
+  }
+}
+
+function scrollToTop() {
+  open.value = false
+  window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+}
+</script>
+
+<template>
+  <div class="VPLocalNavOutlineDropdown" :style="{ '--vt-vh': vh + 'px' }">
+    <button @click="toggle" :class="{ open }">
+      {{ config.i18n?.toc ?? 'On this page' }}
+      <VPIconChevronRight class="icon" />
+    </button>
+    <Transition name="flyout">
+      <div v-if="open" ref="items" class="items" @click="onItemClick">
+        <a class="top-link" href="#" @click="scrollToTop">
+          {{ config.i18n?.returnToTop || 'Return to top' }}
+        </a>
+        <VPDocOutlineItem :headers="headers" />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.VPLocalNavOutlineDropdown {
+  padding: 12px 20px 11px;
+}
+.VPLocalNavOutlineDropdown button {
+  display: block;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 24px;
+  color: var(--vt-c-text-2);
+  transition: color 0.5s;
+  position: relative;
+}
+
+.VPLocalNavOutlineDropdown button:hover {
+  color: var(--vt-c-text-1);
+  transition: color 0.25s;
+}
+
+.VPLocalNavOutlineDropdown button.open {
+  color: var(--vt-c-text-1);
+}
+
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 2px;
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
+:deep(.outline-link) {
+  font-size: 14px;
+  font-weight: 500;
+  padding: 2px 0;
+}
+
+.open > .icon {
+  transform: rotate(90deg);
+}
+
+.items {
+  position: absolute;
+  left: 20px;
+  right: 20px;
+  top: 60px;
+  background-color: var(--vt-c-bg);
+  padding: 4px 20px 16px;
+  border: 1px solid var(--vt-c-divider);
+  border-radius: 8px;
+  max-height: calc(var(--vt-vh, 100vh) - 86px);
+  overflow: scroll;
+  box-shadow: var(--vt-shadow-3);
+}
+
+.top-link {
+  display: block;
+  color: var(--vt-c-brand);
+  font-size: 13px;
+  font-weight: 500;
+  padding: 6px 0;
+  margin: 0 0 10px;
+  border-bottom: 1px solid var(--vt-c-divider);
+}
+
+.flyout-enter-active {
+  transition: all 0.2s ease-out;
+}
+
+.flyout-leave-active {
+  transition: all 0.15s ease-in;
+}
+
+.flyout-enter-from,
+.flyout-leave-to {
+  opacity: 0;
+  transform: translateY(-16px);
+}
+</style>
diff --git a/src/vitepress/composables/outline.ts b/src/vitepress/composables/outline.ts
index 2417217..0cce3fe 100644
--- a/src/vitepress/composables/outline.ts
+++ b/src/vitepress/composables/outline.ts
@@ -1,18 +1,26 @@
-import { onMounted, onUnmounted, onUpdated, Ref } from 'vue'
-import { Header } from 'vitepress'
+import { computed, inject, onMounted, onUnmounted, onUpdated, Ref } from 'vue'
+import { Header, useData } from 'vitepress'
 import { useMediaQuery } from '@vueuse/core'
 import { MenuItemWithLink } from '../../core'
 
-interface HeaderWithChildren extends Header {
+export interface HeaderWithChildren extends Header {
   hidden?: boolean
 }
 
-interface MenuItemWithLinkAndChildren extends MenuItemWithLink {
+export interface MenuItemWithLinkAndChildren extends MenuItemWithLink {
   children?: MenuItemWithLinkAndChildren[]
   hidden?: boolean
 }
 
-export function resolveHeaders(
+export function useOutlineHeaders() {
+  const { page } = useData()
+  const filterHeaders = inject('filter-headers', null) as any
+  return computed(() => {
+    return resolveHeaders(page.value.headers, filterHeaders)
+  })
+}
+
+function resolveHeaders(
   headers: HeaderWithChildren[],
   filter?: (h: HeaderWithChildren) => boolean
 ): MenuItemWithLinkAndChildren[] {
@@ -142,7 +150,7 @@ function isAnchorActive(
 }
 
 function throttleAndDebounce(fn: () => void, delay: number): () => void {
-  let timeout: number
+  let timeout: any
   let called = false
 
   return () => {
diff --git a/src/vitepress/config/baseConfig.js b/src/vitepress/config/baseConfig.js
index dc8ac1d..96881d2 100644
--- a/src/vitepress/config/baseConfig.js
+++ b/src/vitepress/config/baseConfig.js
@@ -14,6 +14,8 @@ const deps = ['@vue/theme', '@vueuse/core', 'body-scroll-lock']
  * @type {import('vitepress').UserConfig}
  */
 const config = {
+  scrollOffset: ['header', '.VPLocalNav'],
+
   vite: {
     ssr: {
       noExternal: deps
diff --git a/tsconfig.json b/tsconfig.json
index a756d9f..e827b52 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,6 +15,6 @@
       "@vue/theme": ["src/index.ts"]
     }
   },
-  "include": ["src", "types", "demo/.vitepress/theme"],
+  "include": ["src", "demo/.vitepress/theme"],
   "exclude": ["node_modules"]
 }
diff --git a/types/vue-shim.d.ts b/types/vue-shim.d.ts
deleted file mode 100644
index 025562f..0000000
--- a/types/vue-shim.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-declare module '*.vue' {
-  import { ComponentOptions } from 'vue'
-  const comp: ComponentOptions
-  export default comp
-}