diff --git a/sites/mipengine.org/components/mip-mipengine-sidenav/README.md b/sites/mipengine.org/components/mip-mipengine-sidenav/README.md
new file mode 100644
index 000000000..3573df96a
--- /dev/null
+++ b/sites/mipengine.org/components/mip-mipengine-sidenav/README.md
@@ -0,0 +1,13 @@
+# `mip-mipengine-sidenav`
+
+## 说明
+
+组件功能说明
+
+## 示例
+
+示例说明
+
+## 属性
+
+属性说明
diff --git a/sites/mipengine.org/components/mip-mipengine-sidenav/example/index.html b/sites/mipengine.org/components/mip-mipengine-sidenav/example/index.html
new file mode 100644
index 000000000..7b8d781de
--- /dev/null
+++ b/sites/mipengine.org/components/mip-mipengine-sidenav/example/index.html
@@ -0,0 +1,370 @@
+<!DOCTYPE html>
+<html mip>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <title>MIP page</title>
+    <link rel="canonical" href="对应的原页面地址">
+    <link rel="stylesheet" href="https://c.mipcdn.com/static/v2/mip.css">
+    <style mip-custom>
+    /* 自定义样式 */
+    .wrapper {
+      margin-left: 100px;
+    }
+    </style>
+  </head>
+  <body>
+    <div class="wrapper">
+      <mip-mipengine-sidenav m-bind:menu="menu" m-bind:chapters="chapters" m-bind:url="url">
+      </mip-mipengine-sidenav>
+      <mip-data>
+        <script type="application/json">
+          {
+            "menu": [{
+              "name": "简介",
+              "path": "docs/guide/basic",
+              "children": [{
+                "name": "新手指南",
+                "path": "docs/guide/basic/newbie.md",
+                "url": "/guide/basic/newbie.html"
+              }, {
+                "name": "完整的例子",
+                "path": "docs/guide/basic/demo.md",
+                "url": "/guide/basic/demo.html"
+              }, {
+                "name": "什么是 MIP",
+                "path": "docs/guide/basic/what-is-mip.md",
+                "url": "/guide/basic/what-is-mip.html"
+              }, {
+                "name": "MIP 加速原理",
+                "path": "docs/guide/basic/principle-of-mip.md",
+                "url": "/guide/basic/principle-of-mip.html"
+              }, {
+                "name": "MIP 内容声明",
+                "path": "docs/guide/basic/announcement.md",
+                "url": "/guide/basic/announcement.html"
+              }]
+            }, {
+              "name": "开发规范",
+              "path": "docs/guide/mip-standard",
+              "children": [{
+                "name": "MIP-HTML 规范",
+                "path": "docs/guide/mip-standard/mip-html-spec.md",
+                "url": "/guide/mip-standard/mip-html-spec.html"
+              }, {
+                "name": "MIP-Cache 规范",
+                "path": "docs/guide/mip-standard/mip-cache-spec.md",
+                "url": "/guide/mip-standard/mip-cache-spec.html"
+              }, {
+                "name": "MIP 校验规则",
+                "path": "docs/guide/mip-standard/mip-validate.md",
+                "url": "/guide/mip-standard/mip-validate.html"
+              }, {
+                "name": "Canonical 使用规范",
+                "path": "docs/guide/mip-standard/mip-canonical.md",
+                "url": "/guide/mip-standard/mip-canonical.html"
+              }, {
+                "name": "组件开发规范",
+                "path": "docs/guide/mip-standard/mip-components-spec.md",
+                "url": "/guide/mip-standard/mip-components-spec.html"
+              }]
+            }, {
+              "name": "MIP 组件机制",
+              "path": "docs/guide/component",
+              "children": [{
+                "name": "MIP 组件化介绍",
+                "path": "docs/guide/component/introduction.md",
+                "url": "/guide/component/introduction.html"
+              }, {
+                "name": "MIP 组件和 Vue 的关系",
+                "path": "docs/guide/component/relationship-between-mip-component-and-vue.md",
+                "url": "/guide/component/relationship-between-mip-component-and-vue.html"
+              }, {
+                "name": "MIP 2.0 组件实例的生命周期和回调钩子",
+                "path": "docs/guide/component/instance-life-cycle.md",
+                "url": "/guide/component/instance-life-cycle.html"
+              }, {
+                "name": "MIP-HTML 语法和对应 MIP 组件开发介绍",
+                "path": "docs/guide/component/syntax.md",
+                "url": "/guide/component/syntax.html"
+              }, {
+                "name": "插槽",
+                "path": "docs/guide/component/slots.md",
+                "url": "/guide/component/slots.html"
+              }, {
+                "name": "组件布局",
+                "path": "docs/guide/component/layout.md",
+                "url": "/guide/component/layout.html"
+              }, {
+                "name": "沙盒机制",
+                "path": "docs/guide/component/sandbox.md",
+                "url": "/guide/component/sandbox.html"
+              }, {
+                "name": "事件通信",
+                "path": "docs/guide/component/actions-and-events.md",
+                "url": "/guide/component/actions-and-events.html"
+              }]
+            }, {
+              "name": "MIP 组件开发",
+              "path": "docs/guide/mip-cli",
+              "children": [{
+                "name": "mip2 命令行工具",
+                "path": "docs/guide/mip-cli/cli-usage.md",
+                "url": "/guide/mip-cli/cli-usage.html"
+              }, {
+                "name": "使用 mip-cli 快速开始",
+                "path": "docs/guide/mip-cli/start-writing-first-mip.md",
+                "url": "/guide/mip-cli/start-writing-first-mip.html"
+              }, {
+                "name": "MIP 组件开发",
+                "path": "docs/guide/mip-cli/component-development.md",
+                "url": "/guide/mip-cli/component-development.html"
+              }, {
+                "name": "组件调试",
+                "path": "docs/guide/mip-cli/component-testing.md",
+                "url": "/guide/mip-cli/component-testing.html"
+              }, {
+                "name": "组件部署",
+                "path": "docs/guide/mip-cli/component-deploy.md",
+                "url": "/guide/mip-cli/component-deploy.html"
+              }, {
+                "name": "提交组件到官方组件仓库",
+                "path": "docs/guide/mip-cli/contribute-to-official-repo.md",
+                "url": "/guide/mip-cli/contribute-to-official-repo.html"
+              }, {
+                "name": "提交站长组件",
+                "path": "docs/guide/mip-cli/contribute-to-site-extensions-repo.md",
+                "url": "/guide/mip-cli/contribute-to-site-extensions-repo.html"
+              }, {
+                "name": "mip2 CLI 用户自定义扩展",
+                "path": "docs/guide/mip-cli/cli-user-plugin.md",
+                "url": "/guide/mip-cli/cli-user-plugin.html"
+              }]
+            }, {
+              "name": "进阶教程",
+              "path": "docs/guide/mip-advanced",
+              "children": [{
+                "name": "MIP 组件间通信",
+                "path": "docs/guide/mip-advanced/components-event.md",
+                "url": "/guide/mip-advanced/components-event.html"
+              }, {
+                "name": "MIP 中与服务端通信",
+                "path": "docs/guide/mip-advanced/data-from-server.md",
+                "url": "/guide/mip-advanced/data-from-server.html"
+              }, {
+                "name": "Promise 在 MIP 中的使用",
+                "path": "docs/guide/mip-advanced/promise.md",
+                "url": "/guide/mip-advanced/promise.html"
+              }, {
+                "name": "MIP 加速原理",
+                "path": "docs/guide/mip-advanced/mip-speed-principle.md",
+                "url": "/guide/mip-advanced/mip-speed-principle.html"
+              }, {
+                "name": "MIP Access 原理剖析",
+                "path": "docs/guide/mip-advanced/access-principle.md",
+                "url": "/guide/mip-advanced/access-principle.html"
+              }, {
+                "name": "离线可用在 MIP 中的实现",
+                "path": "docs/guide/mip-advanced/mip-offline.md",
+                "url": "/guide/mip-advanced/mip-offline.html"
+              }]
+            }, {
+              "name": "MIP 源码解析",
+              "path": "docs/guide/mip-source-interpretation",
+              "children": [{
+                "name": "MIP 模块简介",
+                "path": "docs/guide/mip-source-interpretation/introduction.md",
+                "url": "/guide/mip-source-interpretation/introduction.html"
+              }, {
+                "name": "MIP 基础模块",
+                "path": "docs/guide/mip-source-interpretation/basic.md",
+                "url": "/guide/mip-source-interpretation/basic.html"
+              }, {
+                "name": "MIP 组件机制详解",
+                "path": "docs/guide/mip-source-interpretation/components.md",
+                "url": "/guide/mip-source-interpretation/components.html"
+              }, {
+                "name": "layout 布局规范",
+                "path": "docs/guide/mip-source-interpretation/layout.md",
+                "url": "/guide/mip-source-interpretation/layout.html"
+              }, {
+                "name": "naboo 动画库",
+                "path": "docs/guide/mip-source-interpretation/naboo-animation.md",
+                "url": "/guide/mip-source-interpretation/naboo-animation.html"
+              }, {
+                "name": "gesture 手势集合",
+                "path": "docs/guide/mip-source-interpretation/gesture-sets.md",
+                "url": "/guide/mip-source-interpretation/gesture-sets.html"
+              }, {
+                "name": "hash 通信机制",
+                "path": "docs/guide/mip-source-interpretation/hash.md",
+                "url": "/guide/mip-source-interpretation/hash.html"
+              }, {
+                "name": "platform 识别",
+                "path": "docs/guide/mip-source-interpretation/platform.md",
+                "url": "/guide/mip-source-interpretation/platform.html"
+              }]
+            }, {
+              "name": "可交互 MIP",
+              "path": "docs/guide/interactive-mip",
+              "children": [{
+                "name": "mip-data 设置数据",
+                "path": "docs/guide/interactive-mip/mip-data.md",
+                "url": "/guide/interactive-mip/mip-data.html"
+              }, {
+                "name": "mip-bind 绑定数据",
+                "path": "docs/guide/interactive-mip/mip-bind.md",
+                "url": "/guide/interactive-mip/mip-bind.html"
+              }, {
+                "name": "Class 与 Style 绑定",
+                "path": "docs/guide/interactive-mip/class-style-binding.md",
+                "url": "/guide/interactive-mip/class-style-binding.html"
+              }, {
+                "name": "MIP.setData 修改数据",
+                "path": "docs/guide/interactive-mip/set-data.md",
+                "url": "/guide/interactive-mip/set-data.html"
+              }, {
+                "name": "MIP.watch 观察数据",
+                "path": "docs/guide/interactive-mip/watch.md",
+                "url": "/guide/interactive-mip/watch.html"
+              }, {
+                "name": "全局共享数据",
+                "path": "docs/guide/interactive-mip/global-data.md",
+                "url": "/guide/interactive-mip/global-data.html"
+              }, {
+                "name": "mip-script 自定义 JS",
+                "path": "docs/guide/interactive-mip/mip-script.md",
+                "url": "/guide/interactive-mip/mip-script.html"
+              }, {
+                "name": "可交互 MIP - 概况",
+                "path": "docs/guide/interactive-mip/introduction.md",
+                "url": "/guide/interactive-mip/introduction.html"
+              }]
+            }, {
+              "name": "全站 MIP",
+              "path": "docs/guide/all-sites-mip",
+              "children": [{
+                "name": "全站 MIP 介绍",
+                "path": "docs/guide/all-sites-mip/introduction.md",
+                "url": "/guide/all-sites-mip/introduction.html"
+              }, {
+                "name": "MIP 页面编写规范",
+                "path": "docs/guide/all-sites-mip/structure.md",
+                "url": "/guide/all-sites-mip/structure.html"
+              }, {
+                "name": "页面切换方案",
+                "path": "docs/guide/all-sites-mip/switch-page.md",
+                "url": "/guide/all-sites-mip/switch-page.html"
+              }, {
+                "name": "Page API",
+                "path": "docs/guide/all-sites-mip/page-api.md",
+                "url": "/guide/all-sites-mip/page-api.html"
+              }, {
+                "name": "MIP Shell",
+                "path": "docs/guide/all-sites-mip/mip-shell.md",
+                "url": "/guide/all-sites-mip/mip-shell.html"
+              }, {
+                "name": "MIP Viewer",
+                "path": "docs/guide/all-sites-mip/viewer.md",
+                "url": "/guide/all-sites-mip/viewer.html"
+              }, {
+                "name": "MIP 快捷样式",
+                "path": "docs/guide/all-sites-mip/style.md",
+                "url": "/guide/all-sites-mip/style.html"
+              }]
+            }, {
+              "name": "MIP 搜索生效",
+              "path": "docs/guide/mip-in-search",
+              "children": [{
+                "name": "搜索识别 MIP 页",
+                "path": "docs/guide/mip-in-search/introduction.md",
+                "url": "/guide/mip-in-search/introduction.html"
+              }, {
+                "name": "MIP 搜索生效流程",
+                "path": "docs/guide/mip-in-search/process.md",
+                "url": "/guide/mip-in-search/process.html"
+              }, {
+                "name": "MIP-Cache",
+                "path": "docs/guide/mip-in-search/mip-cache.md",
+                "url": "/guide/mip-in-search/mip-cache.html"
+              }, {
+                "name": "类原生的 MIP 页面体验",
+                "path": "docs/guide/mip-in-search/native-like-mip.md",
+                "url": "/guide/mip-in-search/native-like-mip.html"
+              }]
+            }],
+            "chapters": [{
+              "level": 1,
+              "hash": "#新手指南",
+              "text": "新手指南",
+              "children": [{
+                "level": 2,
+                "hash": "#1-创建-html-文件",
+                "text": "1. 创建 HTML 文件",
+                "children": [{
+                  "level": 3,
+                  "hash": "#测试3",
+                  "text": "测试3长长长长长长长长长长长长长长长长",
+                  "children": [{
+                    "level": 4,
+                    "hash": "#测试4-1",
+                    "text": "测试4-1长长长长长长长长长长长长长",
+                  },{
+                    "level": 4,
+                    "hash": "#测试4-2",
+                    "text": "测试4-2长长长长长长长长长长长长长",
+                    "children": [{
+                      "level": 5,
+                      "hash": "#测试5-1",
+                      "text": "测试5-1长长长长长长长长长长长长长"
+                    }]
+                  }]
+                },{
+                  "level": 3,
+                  "hash": "#测试31",
+                  "text": "测试31",
+                },{
+                  "level": 3,
+                  "hash": "#测试32",
+                  "text": "测试32",
+                }]
+              }, {
+                "level": 2,
+                "hash": "#2-添加-mip-运行环境",
+                "text": "2. 添加 MIP 运行环境"
+              }, {
+                "level": 2,
+                "hash": "#3-添加-mip-关联标签",
+                "text": "3. 添加 MIP 关联标签"
+              }, {
+                "level": 2,
+                "hash": "#4-添加样式",
+                "text": "4. 添加样式"
+              }, {
+                "level": 2,
+                "hash": "#5-替换禁用-html-标签",
+                "text": "5. 替换禁用 HTML 标签"
+              }, {
+                "level": 2,
+                "hash": "#6-使用-mip-组件",
+                "text": "6. 使用 MIP 组件"
+              }, {
+                "level": 2,
+                "hash": "#7-预览",
+                "text": "7. 预览"
+              }, {
+                "level": 2,
+                "hash": "#8-起飞",
+                "text": "8. 起飞"
+              }]
+            }],
+            'url': "/guide/mip-standard/mip-html-spec.html"
+          }
+
+        </script>
+      </mip-data>
+    </div>
+    <script src="https://c.mipcdn.com/static/v2/mip.js"></script>
+    <script src="/mip-mipengine-sidenav/mip-mipengine-sidenav.js"></script>
+  </body>
+</html>
diff --git a/sites/mipengine.org/components/mip-mipengine-sidenav/mip-mipengine-sidenav.vue b/sites/mipengine.org/components/mip-mipengine-sidenav/mip-mipengine-sidenav.vue
new file mode 100644
index 000000000..0533754a9
--- /dev/null
+++ b/sites/mipengine.org/components/mip-mipengine-sidenav/mip-mipengine-sidenav.vue
@@ -0,0 +1,89 @@
+<template>
+  <div
+    ref="sidenavLeft"
+    class="sidenav-wrapper"
+    @click="click($event)"
+  >
+    <sidenav-menu
+      :menu="menu"
+      :url="url"
+      :level="level"
+      :activeindex="activeIndex">
+      <template slot-scope="slotProps">
+        <sidenav-chapter
+          :chapters="chapters"
+          :level="level"
+          :active="activeChapter"
+          @select="chapterSelected"/>
+      </template>
+    </sidenav-menu>
+  </div>
+</template>
+
+<style scoped lang="less">
+.sidenav-wrapper {
+}
+</style>
+
+<script>
+import SidenavChapter from './mip-sidenav-chapter'
+import SidenavMenu from './mip-sidenav-menu'
+
+export default {
+  name: 'MipSidenav',
+  components: {
+    SidenavChapter,
+    SidenavMenu
+  },
+  props: {
+    menu: {
+      type: Array,
+      default: null
+    },
+    chapters: {
+      type: Array,
+      default: null
+    },
+    level: {
+      type: Number,
+      default: 0
+    },
+    url: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      activeChapter: decodeURIComponent(location.hash) || ''
+    }
+  },
+  computed: {
+    activeIndex: function () {
+      return this.menu.findIndex(m => {
+        return m.children && m.children.find(c => {
+          return c.url === this.url
+        })
+      })
+    }
+  },
+  mounted () {
+    let activeDom = this.$refs.sidenavLeft.querySelectorAll('.activemenu')[0]
+    let activeTop = activeDom ? activeDom.offsetTop : 0
+    let scrollDom = document.querySelectorAll('.layout-sidebar')[0]
+    if (scrollDom) {
+      scrollDom.scrollTop = activeTop
+    }
+  },
+  methods: {
+    chapterSelected (key) {
+      this.activeChapter = key
+    },
+    click (e) {
+      this.$nextTick(() => {
+        this.$emit('clicked', e)
+      })
+    }
+  }
+}
+</script>
diff --git a/sites/mipengine.org/components/mip-mipengine-sidenav/mip-sidenav-chapter.vue b/sites/mipengine.org/components/mip-mipengine-sidenav/mip-sidenav-chapter.vue
new file mode 100644
index 000000000..fc6a1be1e
--- /dev/null
+++ b/sites/mipengine.org/components/mip-mipengine-sidenav/mip-sidenav-chapter.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="wd-infinity-chapters">
+    <template v-for="(item, index) in chapters">
+      <a
+        v-if="level !== 0"
+        :key="item.text"
+        :class="{selected: active ? active === item.hash : (index === 0 && level === 1)}"
+        :href="item.hash"
+        class="chapter-title"
+        @click="select(item.hash)"
+      >
+        <div v-html="item.text"/>
+      </a>
+      <div
+        v-if="item.children"
+        :class="'children-' + level"
+        :key="item.text">
+        <mip-sidenav-chapter
+          :chapters="item.children"
+          :level="level + 1"
+          :active="active"
+          @select="select"/>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="less">
+.wd-infinity-chapters {
+  position: relative;
+  div[class^="children-"] {
+    .chapter-title {
+      font-size: 14px;
+      line-height: 24px;
+      color: #555;
+      padding: 10px 10px 10px 0;
+      display: block;
+      cursor: pointer;
+      margin-left: 10px;
+      &:active {
+        background: #f5f5f5;
+      }
+      @media (min-width: 768px) {
+        &:hover {
+          background: #f5f5f5;
+        }
+      }
+      &.selected {
+        >div {
+          color: #000;
+          font-weight: bold;
+          border-left: 2px solid #000;
+          transition: border .2s linear;
+        }
+      }
+
+      >div {
+        border-left: 2px solid transparent;
+        padding-left: 30px;
+        margin-left: -12px;
+        position: relative;
+        &::before {
+          content: '·';
+          color: #000;
+          display: inline-block;
+          padding-right: 5px;
+          position: absolute;
+          left: 20px;
+        }
+      }
+    }
+  }
+  .children-0 {
+    margin-left: 10px;
+    border-left: 2px solid #f1f1f1;
+    &>.wd-infinity-chapters {
+      margin-bottom: 16px;
+      &>.chapter-title {
+        >div {
+          padding-left: 20px;
+          &::before {
+            display: none;
+          }
+        }
+      }
+      // 隐藏多余的 border
+      &>:first-child {
+        &:before {
+          content: '';
+          height: 12px;
+          border-left: 6px solid #fff;
+          position: absolute;
+          top: 0;
+          left: -4px;
+        }
+      }
+      &>:last-child {
+        &:after {
+          content: '';
+          height: 12px;
+          border-left: 6px solid #fff;
+          position: absolute;
+          bottom: 0;
+          left: -4px;
+        }
+      }
+    }
+  }
+
+  // 特殊第4、5层
+  .children-2 {
+    &>.wd-infinity-chapters {
+      padding-left: 10px;
+      &>.chapter-title {
+        >div {
+          padding-left: 40px;
+          margin-left: -22px;
+          &::before {
+            left: 30px;
+          }
+        }
+      }
+    }
+  }
+
+  .children-3 {
+    &>.wd-infinity-chapters {
+      padding-left: 10px;
+      &>.chapter-title {
+        >div {
+          padding-left: 50px;
+          margin-left: -32px;
+          &::before {
+            left: 40px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+
+<script>
+export default {
+  name: 'MipSidenavChapter',
+  props: {
+    chapters: {
+      type: Array,
+      default: null
+    },
+    level: {
+      type: Number,
+      default: 0
+    },
+    active: {
+      type: String,
+      default: ''
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    select (key) {
+      this.$emit('select', key)
+    }
+  }
+}
+</script>
diff --git a/sites/mipengine.org/components/mip-mipengine-sidenav/mip-sidenav-menu.vue b/sites/mipengine.org/components/mip-mipengine-sidenav/mip-sidenav-menu.vue
new file mode 100644
index 000000000..5e30284cc
--- /dev/null
+++ b/sites/mipengine.org/components/mip-mipengine-sidenav/mip-sidenav-menu.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="wd-infinity-menu">
+    <template v-for="(menuItem, idx) in menu">
+      <div
+        v-if="menuItem.children"
+        :class="'l-' + level"
+        :key="menuItem.path">
+        <div
+          :class="{'activemenu': idx === activeindex}"
+          class="folder show">{{ menuItem.text || menuItem.name }}</div>
+        <div :class="'children-' + level">
+          <mip-sidenav
+            :menu="menuItem.children"
+            :level="level + 1"
+            :url="url">
+            <template slot-scope="slotProps">
+              <slot/>
+            </template>
+          </mip-sidenav>
+        </div>
+      </div>
+      <div
+        v-else
+        :class="'l-' + level"
+        :key="menuItem.path">
+        <div v-if="url === menuItem.url">
+          <div class="sub-folder">{{ menuItem.text || menuItem.name }}</div>
+          <slot/>
+        </div>
+        <a
+          v-else
+          :href="menuItem.url"
+          data-type="mip">
+          {{ menuItem.text || menuItem.name }}
+        </a>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="less">
+.wd-infinity-menu {
+  div[class^="l-"] {
+    a {
+      display: block;
+      margin-bottom: 4px;
+      padding: 10px 10px;
+      color: #6a6b6c;
+      font-size: 14px;
+      line-height: 20px;
+      &:active {
+        background: #f5f5f5;
+      }
+      @media (min-width: 768px) {
+        &:hover {
+          background: #f5f5f5;
+        }
+      }
+    }
+    .sub-folder {
+      color: #000;
+      font-weight: bold;
+      padding: 12px 10px;
+      margin-bottom: 3px;
+      line-height: 24px;
+    }
+  }
+  .l-0 .folder {
+    color: #000;
+    font-size: 18px;
+    line-height: 24px;
+    padding: 30px 0 24px 10px;
+    &.activemenu {
+      font-weight: bold;
+    }
+  }
+  .l-1 .folder {
+    // 只有第一级的 folder 不缩进，后续都缩进
+    padding: 10px 0 14px 30px;
+  }
+}
+
+.children-1 {
+  .wd-infinity-menu {
+    padding-left: 20px;
+  }
+}
+
+.wd-infinity-chapters {
+  div[class^="children-"] {
+    padding-left: 20px;
+    .chapter-title {
+      margin: 16px 0;
+      display: block;
+      &::before {
+        content: '·';
+        display: inline-block;
+        padding-right: 5px;
+      }
+    }
+  }
+
+  .children-0 {
+    border-left: 2px solid #f1f1f1;
+    &>.wd-infinity-chapters>.chapter-title {
+      color: #000;
+      &::before {
+        display: none;
+      }
+    }
+  }
+}
+</style>
+
+<script>
+export default {
+  name: 'MipSidenav',
+  props: {
+    menu: {
+      type: Array,
+      default: null
+    },
+    level: {
+      type: Number,
+      default: 0
+    },
+    url: {
+      type: String,
+      default: ''
+    },
+    activeindex: {
+      type: Number,
+      default: 0
+    }
+  }
+}
+</script>
diff --git a/sites/mipengine.org/components/mip-mipengine-stepper-tabs/README.md b/sites/mipengine.org/components/mip-mipengine-stepper-tabs/README.md
new file mode 100644
index 000000000..0b7339442
--- /dev/null
+++ b/sites/mipengine.org/components/mip-mipengine-stepper-tabs/README.md
@@ -0,0 +1,19 @@
+# `mip-mipengine-stepper-tabs`
+
+标题|内容
+----|----
+类型|
+支持布局|
+所需脚本|
+
+## 说明
+
+组件功能说明
+
+## 示例
+
+示例说明
+
+## 属性
+
+属性说明
diff --git a/sites/mipengine.org/components/mip-mipengine-stepper-tabs/example/index.html b/sites/mipengine.org/components/mip-mipengine-stepper-tabs/example/index.html
new file mode 100644
index 000000000..c333f6f05
--- /dev/null
+++ b/sites/mipengine.org/components/mip-mipengine-stepper-tabs/example/index.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html mip>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <title>MIP page</title>
+    <link rel="canonical" href="对应的原页面地址">
+    <link rel="stylesheet" href="https://bos.nj.bpc.baidu.com/assets/mip/projects/mip.css">
+    <style mip-custom>
+    /* 自定义样式 */
+    @font-face {font-family: "iconfont";
+      src: url('//gss0.baidu.com/9rkZbzqaKgQUohGko9WTAnF6hhy/assets/mip/site/iconfont-15aceae1.eot?t=1534744468782'); /* IE9*/
+      src: url('//gss0.baidu.com/9rkZbzqaKgQUohGko9WTAnF6hhy/assets/mip/site/iconfont-15aceae1.eot?t=1534744468782#iefix') format('embedded-opentype'), /* IE6-IE8 */
+      url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
+      url('//gss0.baidu.com/9rkZbzqaKgQUohGko9WTAnF6hhy/assets/mip/site/iconfont-27d98747.ttf?t=1534744468782') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+      url('//gss0.baidu.com/9rkZbzqaKgQUohGko9WTAnF6hhy/assets/mip/site/iconfont-aa4f7aa0.svg?t=1534744468782#iconfont') format('svg'); /* iOS 4.1- */
+    }
+
+    .iconfont {
+      font-family:"iconfont" !important;
+      font-size:16px;
+      font-style:normal;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    .icon-github:before { content: "\f01ca"; }
+
+    .icon-check:before { content: "\e632"; }
+
+    .icon-bars:before { content: "\e607"; }
+
+    .icon-like:before { content: "\e636"; }
+
+    .icon-info:before { content: "\e603"; }
+
+    .icon-error:before { content: "\e604"; }
+
+    .icon-warn:before { content: "\e606"; }
+
+    .icon-caidan:before { content: "\e607"; }
+
+    </style>
+  </head>
+  <body>
+    <div>
+      <mip-mipengine-stepper-tabs
+        m-bind:menu-steps="menu"
+        m-bind:codelab-step-selected="codelabStepSelected"
+      >
+      <div slot="codelab-step-content">概述
+      </div>
+    </mip-mipengine-stepper-tabs>
+      <mip-data>
+        <script type="application/json">
+          {
+            "codelabStepSelected": '/codelab/get-started/introduction.html',
+            "menu": {
+              "name": "get-started",
+              "path": "codelab/get-started",
+              "children": [{
+                "name": "概述",
+                "path": "codelab/get-started/introduction.md",
+                "url": "/codelab/get-started/introduction"
+              }, {
+                "name": "准备环境",
+                "path": "codelab/get-started/prepare.md",
+                "url": "/codelab/get-started/prepare"
+              }, {
+                "name": "查看主页",
+                "path": "codelab/get-started/homepage.md",
+                "url": "/codelab/get-started/homepage"
+              }, {
+                "name": "创建新页面和链接",
+                "path": "codelab/get-started/new-page-and-link.md",
+                "url": "/codelab/get-started/new-page-and-link"
+              }, {
+                "name": "发送请求",
+                "path": "codelab/get-started/request.md",
+                "url": "/codelab/get-started/request"
+              }, {
+                "name": "代理 API 请求",
+                "path": "codelab/get-started/proxy-table.md",
+                "url": "/codelab/get-started/proxy-table"
+              }, {
+                "name": "使用 Vuex 管理数据",
+                "path": "codelab/get-started/vuex.md",
+                "url": "/codelab/get-started/vuex"
+              }, {
+                "name": "配置 Manifest",
+                "path": "codelab/get-started/manifest.md",
+                "url": "/codelab/get-started/manifest"
+              }, {
+                "name": "配置 Service Worker",
+                "path": "codelab/get-started/service-worker.md",
+                "url": "/codelab/get-started/service-worker"
+              }, {
+                "name": "构建代码和上线",
+                "path": "codelab/get-started/build-start.md",
+                "url": "/codelab/get-started/build-start"
+              }],
+              "info": {
+                "name": "开发第一个 Lavas 应用",
+                "description": "对于没有使用过 Lavas 的开发者，如何使用 Lavas 2.0 版本开发第一个 Lavas PWA 应用，包含 manifest, Service Worker等 PWA 相关的功能。",
+                "tag": ["Lavas 2.0", "起步教程"],
+                "duration": "2小时"
+              }
+            }
+          }
+        </script>
+      </mip-data>
+    </div>
+    <script src="https://bos.nj.bpc.baidu.com/assets/mip/projects/mip.js"></script>
+    <script src="/mip-mipengine-stepper-tabs/mip-mipengine-stepper-tabs.js"></script>
+  </body>
+</html>
+
+
+
+
+
+
diff --git a/sites/mipengine.org/components/mip-mipengine-stepper-tabs/mip-mipengine-stepper-tabs.vue b/sites/mipengine.org/components/mip-mipengine-stepper-tabs/mip-mipengine-stepper-tabs.vue
new file mode 100644
index 000000000..e47447c94
--- /dev/null
+++ b/sites/mipengine.org/components/mip-mipengine-stepper-tabs/mip-mipengine-stepper-tabs.vue
@@ -0,0 +1,132 @@
+<template>
+  <div
+    v-if="stepList && stepList.length"
+    class="step-menu-wrapper"
+  >
+    <ul>
+      <li
+        v-for="(item, index) in stepList"
+        :key="index"
+        :class="{'item-step': true, 'active': item.url === codelabStepSelected}"
+      >
+        <a
+          :href="item.url"
+          data-type="mip"
+        >
+          <div :class="{'step-num': true, 'step-done': index <= selected}">
+            <span class="num">{{ index + 1 }}</span>
+            <span class="icon-pass"><i class="iconfont icon-info"/></span>
+          </div>
+          <span class="step-name">{{ item.name }}</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="less" scoped>
+
+.step-menu-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  li {
+    list-style: none;
+    width: 300px;
+    box-sizing: border-box;
+    padding: 30px 20px 10px;;
+    color: #666;
+    cursor: pointer;
+
+    .step-num {
+      display: inline-block;
+      margin-right: 10px;
+      .num {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        text-align: center;
+      }
+      .icon-pass {
+        display: none;
+      }
+
+      &.step-done {
+        width: 16px;
+        height: 16px;
+        .num {
+          display: none;
+        }
+        .icon-pass {
+          display: inline-block;
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+
+    &.active {
+      color: #333;
+      .step-name {
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.step-content-wrapper {
+  margin: 0 20px 40px 300px;
+  .step-content-list {
+    .content-item {
+      display: none;
+      line-height: 30px;
+
+      &.show {
+        display: block;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .step-content-wrapper {
+    margin: 0 20px 40px;
+  }
+
+}
+
+</style>
+
+<script>
+
+export default {
+  name: 'MipStepperTabs',
+  props: {
+    codelabStepSelected: {
+      type: String,
+      default: '/codelab/index.html'
+    },
+    menuSteps: {
+      type: [Object, Array],
+      default: null
+    }
+  },
+  computed: {
+    stepList () {
+      if (!this.menuSteps) return
+      if (this.menuSteps instanceof Array) {
+        return this.menuSteps
+      }
+      if (this.menuSteps.children) {
+        return this.menuSteps.children
+      }
+    },
+    selected () {
+      let activeIndex = this.stepList && this.stepList.findIndex(item => {
+        return item.url === location.pathname
+      })
+      return activeIndex >= 0 ? activeIndex : 0
+    }
+  }
+}
+</script>
diff --git a/sites/mipengine.org/mip.config.js b/sites/mipengine.org/mip.config.js
index b2c9b9a63..0622a335e 100644
--- a/sites/mipengine.org/mip.config.js
+++ b/sites/mipengine.org/mip.config.js
@@ -24,6 +24,6 @@ module.exports = {
      *
      * @type {string|boolean}
      */
-    autoopen: '/example/index.html'
+    autoopen: false
   }
 }
