diff --git a/devui/nav-sprite/index.ts b/devui/nav-sprite/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b3fbd5abbdb1f0d4c0c87de42445cf60a18964d3
--- /dev/null
+++ b/devui/nav-sprite/index.ts
@@ -0,0 +1,17 @@
+import { App } from 'vue';
+import NavSprite from './src/nav-sprite';
+
+NavSprite.install = function (app: App) {
+  app.component(NavSprite.name, NavSprite);
+};
+
+export { NavSprite };
+
+export default {
+  title: 'NavSprite 导航精灵',
+  category: '导航',
+  status: '10%',
+  install(app: App): void {
+    app.use(NavSprite as any);
+  }
+};
diff --git a/devui/nav-sprite/src/nav-sprite-types.ts b/devui/nav-sprite/src/nav-sprite-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ef4293b0cb14a019413a1ab945211bd699a066cc
--- /dev/null
+++ b/devui/nav-sprite/src/nav-sprite-types.ts
@@ -0,0 +1,74 @@
+import { PropType } from 'vue';
+export type SpriteMode = 'default' | 'sprite';
+
+export interface SpriteOption {
+    top: string
+    left: string
+    zIndex: number
+}
+export interface NavMenu {
+    originEle: HTMLElement
+    label: string
+    level: number
+    scrollPosition: {
+        top: number
+        startLine: number
+    }
+}
+export const navSpriteProps = {
+    // // 爬取目录的容器
+    target: {
+        type: HTMLElement
+    },
+    // // 指定滚动的DOM
+    scrollTarget: {
+        type: HTMLElement,
+    },
+    // // 矫正参数
+    view: {
+        type: Object as () => {
+            top?: number
+            bottom?: number
+        },
+        default: { top: 0, bottom: 0 }
+    },
+    // // 支持锚点
+    hashSupport: {
+        type: Boolean,
+        default: false
+    },
+    mode: {
+        type: String as () => SpriteMode,
+        default: 'default'
+    },
+    maxLevel: {
+        type: Number,
+        default: 3
+    },
+    title: {
+        type: String,
+        default: 'menu'
+    },
+    // 缩进
+    indent: {
+        type: Number,
+        default: 2
+    },
+    width: {
+        type: Number,
+        default: 300
+    },
+    height: {
+        type: Number,
+        default: 400
+    },
+    // sprite模式下的初始状态
+    isOpen: {
+        type: Boolean,
+        default: true
+    },
+    // sprite模式下的初始位置
+    spriteOption: {
+        type: Object as () => SpriteOption,
+    }
+}
diff --git a/devui/nav-sprite/src/nav-sprite.scss b/devui/nav-sprite/src/nav-sprite.scss
new file mode 100644
index 0000000000000000000000000000000000000000..eb16092ec8eb848361ea3263f871602a4b2a1b92
--- /dev/null
+++ b/devui/nav-sprite/src/nav-sprite.scss
@@ -0,0 +1,112 @@
+@import '../../style/theme/color';
+@import '../../style/theme/variables';
+@import '../../style/theme/shadow';
+@import '../../styles-var/devui-var.scss';
+
+.devui-is-sprite {
+  background-color: $devui-connected-overlay-bg;
+  box-shadow: $devui-shadow-length-connected-overlay $devui-shadow;
+  cursor: move;
+  padding: 0 16px 16px;
+  max-width: 300px;
+
+  &.is-min {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px !important;
+    height: 40px !important;
+    border-radius: 100%;
+    padding: 0;
+
+    &:hover {
+      color: $devui-light-text;
+      background-color: $devui-brand;
+    }
+
+    i {
+      cursor: pointer;
+    }
+  }
+
+  .devui-nav-sprite-menus {
+    width: 100%;
+    height: 100%;
+    max-height: 240px;
+  }
+}
+
+.devui-nav-sprite-content {
+  width: 100%;
+  height: 100%;
+  padding: 0 12px 16px 12px;
+
+  .devui-nav-sprite-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    color: $devui-text;
+    line-height: 32px;
+    font-weight: bold;
+    font-size: $devui-font-size-card-title;
+    border-bottom: 1px solid $devui-dividing-line;
+
+    .devui-nav-spiri-close {
+      cursor: pointer;
+    }
+  }
+}
+
+.devui-nav-sprite-menus {
+  margin-top: 10px;
+  overflow-y: hidden;
+  height: calc(100% - 80px);
+
+  &:hover {
+    overflow-y: auto;
+  }
+
+  & > li {
+    list-style: none;
+    cursor: pointer;
+    height: 30px;
+    line-height: 30px;
+    font-size: $devui-font-size;
+    color: $devui-text;
+    position: relative;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    a {
+      color: $devui-text;
+    }
+
+    &.active {
+      a {
+        color: $devui-link;
+      }
+
+      color: $devui-link;
+    }
+
+    &:not(.disabled):hover {
+      color: $devui-list-item-hover-text;
+    }
+
+    .nav-item {
+      a,
+      span {
+        &:hover {
+          color: $devui-list-item-hover-text;
+        }
+      }
+    }
+  }
+}
+
+.devui-no-data {
+  line-height: 32px;
+  color: $devui-text;
+}
diff --git a/devui/nav-sprite/src/nav-sprite.tsx b/devui/nav-sprite/src/nav-sprite.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..378e15c6b1a80d673bb1ec2db097526779dd8bb6
--- /dev/null
+++ b/devui/nav-sprite/src/nav-sprite.tsx
@@ -0,0 +1,11 @@
+import { defineComponent } from '@vue/runtime-core';
+import { navSpriteProps } from './nav-sprite-types';
+
+export default defineComponent({
+  name: 'DNavSprite',
+  props: navSpriteProps,
+  emits: ['afterNavInit'],
+  setup(props) {
+    return {};
+  }
+});
diff --git a/docs/components/nav-sprite/index.md b/docs/components/nav-sprite/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..10fcbfff453a55d140523f5309b53cb211b96b87
--- /dev/null
+++ b/docs/components/nav-sprite/index.md
@@ -0,0 +1,9 @@
+# NavSprite 导航精灵
+
+导航精灵组件
+
+### 何时使用
+
+针对某块阅读区域生成阅读目录，提高阅读效率。
+
+### 基本用法