diff --git a/src/components/d2-module-banner/index.vue b/src/components/d2-module-index-banner/index.vue
similarity index 100%
rename from src/components/d2-module-banner/index.vue
rename to src/components/d2-module-index-banner/index.vue
diff --git a/src/components/d2-module-index-menu/components/group.vue b/src/components/d2-module-index-menu/components/group.vue
new file mode 100644
index 00000000..22cd4af3
--- /dev/null
+++ b/src/components/d2-module-index-menu/components/group.vue
@@ -0,0 +1,100 @@
+<template>
+  <div
+    class="d2-module-index-menu-group"
+    :class="groupClassName"
+    v-if="!isTitle">
+    <!-- 有子菜单 -->
+    <template v-if="menu.children">
+      <p
+        class="d2-module-index-menu-group--title"
+        :class="titleClassName">
+        {{menu.title}}
+      </p>
+      <template v-for="(item, index) in menu.children">
+        <d2-module-index-menu-group
+          v-if="item.children"
+          :key="`group-${index}`"
+          :menu="item"
+          :level="level + 1"/>
+        <d2-module-index-menu-item
+          v-else
+          :key="`button-${index}`"
+          :menu="item"/>
+      </template>
+    </template>
+    <!-- 没有子菜单 -->
+    <template v-else>
+      <p
+        class="d2-module-index-menu-group--title"
+        :class="titleClassName">
+        {{menu.title}}
+      </p>
+      <d2-module-index-menu-item :menu="menu"/>
+    </template>
+  </div>
+</template>
+
+<script>
+import d2ModuleIndexMenuItem from './item'
+export default {
+  name: 'd2-module-index-menu-group',
+  components: {
+    d2ModuleIndexMenuItem
+  },
+  props: {
+    menu: {
+      default: () => ({})
+    },
+    level: {
+      default: 1
+    }
+  },
+  computed: {
+    groupClassName () {
+      return `d2-module-index-menu-group--${this.level}`
+    },
+    titleClassName () {
+      return `d2-module-index-menu-group--title-${this.level}`
+    },
+    isTitle () {
+      // 标题中含有 首页 文字
+      if ((this.menu.title || '').indexOf('首页') > 0) {
+        return true
+      }
+      // 图标为 home
+      if (this.menu.icon === 'home') {
+        return true
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.d2-module-index-menu-group {
+  margin-bottom: 10px;
+  padding-left: 10px;
+  margin-left: 10px;
+  border-left: 2px solid #0077ff;
+  &.d2-module-index-menu-group--1 {
+    padding-left: 0px;
+    margin-left: 0px;
+    border-left: none;
+    margin-bottom: 10px;
+  }
+  p {
+    margin: 0px;
+    padding: 0px;
+  }
+  .d2-module-index-menu-group--title {
+    font-size: 14px;
+    line-height: 14px;
+    margin-bottom: 10px;
+    &.d2-module-index-menu-group--title-1 {
+      font-size: 18px;
+      line-height: 18px;
+      font-weight: bold;
+    }
+  }
+}
+</style>
diff --git a/src/components/d2-module-index-menu/components/item.vue b/src/components/d2-module-index-menu/components/item.vue
new file mode 100644
index 00000000..2331066d
--- /dev/null
+++ b/src/components/d2-module-index-menu/components/item.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-button
+    class="d2-module-index-menu-item"
+    @click="handleClick">
+    {{menu.title}}
+  </el-button>
+</template>
+
+<script>
+export default {
+  props: {
+    menu: {
+      default: () => ({})
+    }
+  },
+  methods: {
+    handleClick () {
+      if (this.menu.path) {
+        this.$router.push(this.menu.path)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.d2-module-index-menu-item {
+  margin-bottom: 10px;
+}
+</style>
diff --git a/src/components/d2-module-index-menu/index.vue b/src/components/d2-module-index-menu/index.vue
new file mode 100644
index 00000000..0c36e6ce
--- /dev/null
+++ b/src/components/d2-module-index-menu/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <transition name="fade-transverse">
+    <div v-if="show" class="d2-module-index-menu">
+      <d2-module-index-menu-group
+        v-for="(item, index) in menu.children"
+        :key="index"
+        :menu="item"/>
+    </div>
+  </transition>
+</template>
+
+<script>
+import d2ModuleIndexMenuGroup from './components/group'
+export default {
+  components: {
+    d2ModuleIndexMenuGroup
+  },
+  props: {
+    menu: {
+      default: () => ({
+        children: []
+      })
+    }
+  },
+  data () {
+    return {
+      show: false
+    }
+  },
+  mounted () {
+    setTimeout(() => {
+      this.show = true
+    }, 300)
+  }
+}
+</script>
+
+<style lang="scss">
+.d2-module-index-menu {
+  @extend %unable-select;
+  margin-top: 20px;
+}
+</style>
diff --git a/src/components/index.js b/src/components/index.js
index e738d7de..76a5b68a 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -16,6 +16,7 @@ Vue.component('d2-icon-select', () => import('./d2-icon-select/index.vue'))
 Vue.component('d2-icon-svg', () => import('./d2-icon-svg/index.vue'))
 Vue.component('d2-markdown', () => import('./d2-markdown'))
 Vue.component('d2-mde', () => import('./d2-mde'))
-Vue.component('d2-module-banner', () => import('./d2-module-banner'))
+Vue.component('d2-module-index-banner', () => import('./d2-module-index-banner'))
+Vue.component('d2-module-index-menu', () => import('./d2-module-index-menu'))
 Vue.component('d2-quill', () => import('./d2-quill'))
 Vue.component('d2-ueditor', () => import('./d2-ueditor'))
diff --git a/src/pages/demo/business/index/index.vue b/src/pages/demo/business/index/index.vue
index bc962084..cdf1541e 100644
--- a/src/pages/demo/business/index/index.vue
+++ b/src/pages/demo/business/index/index.vue
@@ -1,14 +1,17 @@
 <template>
   <d2-container :filename="filename" type="ghost">
-    <d2-module-banner slot="header" v-bind="banner"/>
+    <d2-module-index-banner slot="header" v-bind="banner"/>
+    <d2-module-index-menu :menu="menu"/>
   </d2-container>
 </template>
 
 <script>
+import menu from '@/menu/modules/demo-business'
 export default {
   data () {
     return {
       filename: __filename,
+      menu,
       banner: {
         title: 'DEMOS',
         subTitle: '提供借鉴和参考的页面'
diff --git a/src/pages/demo/charts/index/index.vue b/src/pages/demo/charts/index/index.vue
index fd2df087..19522ec9 100644
--- a/src/pages/demo/charts/index/index.vue
+++ b/src/pages/demo/charts/index/index.vue
@@ -1,14 +1,17 @@
 <template>
   <d2-container :filename="filename" type="ghost">
-    <d2-module-banner slot="header" v-bind="banner"/>
+    <d2-module-index-banner slot="header" v-bind="banner"/>
+    <d2-module-index-menu :menu="menu"/>
   </d2-container>
 </template>
 
 <script>
+import menu from '@/menu/modules/demo-charts'
 export default {
   data () {
     return {
       filename: __filename,
+      menu,
       banner: {
         title: 'CHARTS',
         subTitle: '图表示例'
diff --git a/src/pages/demo/components/index/index.vue b/src/pages/demo/components/index/index.vue
index afd7f701..b96bcfed 100644
--- a/src/pages/demo/components/index/index.vue
+++ b/src/pages/demo/components/index/index.vue
@@ -1,14 +1,17 @@
 <template>
   <d2-container :filename="filename" type="ghost">
-    <d2-module-banner slot="header" v-bind="banner"/>
+    <d2-module-index-banner slot="header" v-bind="banner"/>
+    <d2-module-index-menu :menu="menu"/>
   </d2-container>
 </template>
 
 <script>
+import menu from '@/menu/modules/demo-components'
 export default {
   data () {
     return {
       filename: __filename,
+      menu,
       banner: {
         title: 'COMPONENTS',
         subTitle: 'D2Admin 为你提供了一些上手即用的组件'
diff --git a/src/pages/demo/d2-crud/index/index.vue b/src/pages/demo/d2-crud/index/index.vue
index a9b03e64..92c4cfb5 100644
--- a/src/pages/demo/d2-crud/index/index.vue
+++ b/src/pages/demo/d2-crud/index/index.vue
@@ -1,14 +1,17 @@
 <template>
   <d2-container :filename="filename" type="ghost">
-    <d2-module-banner slot="header" v-bind="banner"/>
+    <d2-module-index-banner slot="header" v-bind="banner"/>
+    <d2-module-index-menu :menu="menu"/>
   </d2-container>
 </template>
 
 <script>
+import menu from '@/menu/modules/demo-d2-crud'
 export default {
   data () {
     return {
       filename: __filename,
+      menu,
       banner: {
         title: 'D2 CRUD',
         subTitle: 'D2 Crud 是一个基于 Vue.js 和 Element UI 的表格组件，封装了常用的表格操作。',
diff --git a/src/pages/demo/element/index/index.vue b/src/pages/demo/element/index/index.vue
index b2190ab0..9c4b2390 100644
--- a/src/pages/demo/element/index/index.vue
+++ b/src/pages/demo/element/index/index.vue
@@ -1,14 +1,17 @@
 <template>
   <d2-container :filename="filename" type="ghost">
-    <d2-module-banner slot="header" v-bind="banner"/>
+    <d2-module-index-banner slot="header" v-bind="banner"/>
+    <d2-module-index-menu :menu="menu"/>
   </d2-container>
 </template>
 
 <script>
+import menu from '@/menu/modules/demo-element'
 export default {
   data () {
     return {
       filename: __filename,
+      menu,
       banner: {
         title: 'ElementUI',
         subTitle: 'D2Admin 集成由饿了么出品的 ElementUI',
diff --git a/src/pages/demo/frame/index/index.vue b/src/pages/demo/frame/index/index.vue
index 0053b976..3957e27a 100644
--- a/src/pages/demo/frame/index/index.vue
+++ b/src/pages/demo/frame/index/index.vue
@@ -1,14 +1,17 @@
 <template>
   <d2-container :filename="filename" type="ghost">
-    <d2-module-banner slot="header" v-bind="banner"/>
+    <d2-module-index-banner slot="header" v-bind="banner"/>
+    <d2-module-index-menu :menu="menu"/>
   </d2-container>
 </template>
 
 <script>
+import menu from '@/menu/modules/demo-frame'
 export default {
   data () {
     return {
       filename: __filename,
+      menu,
       banner: {
         title: 'FRAME',
         subTitle: '在 D2Admin 中嵌入其它页面'
diff --git a/src/pages/demo/playground/index/index.vue b/src/pages/demo/playground/index/index.vue
index a6e27fe9..4b7d0060 100644
--- a/src/pages/demo/playground/index/index.vue
+++ b/src/pages/demo/playground/index/index.vue
@@ -1,14 +1,17 @@
 <template>
   <d2-container :filename="filename" type="ghost">
-    <d2-module-banner slot="header" v-bind="banner"/>
+    <d2-module-index-banner slot="header" v-bind="banner"/>
+    <d2-module-index-menu :menu="menu"/>
   </d2-container>
 </template>
 
 <script>
+import menu from '@/menu/modules/demo-playground'
 export default {
   data () {
     return {
       filename: __filename,
+      menu,
       banner: {
         title: 'PLAYGROUND',
         subTitle: '在这里可以测试一些 D2Admin 的系统功能'
diff --git a/src/pages/demo/plugins/index/index.vue b/src/pages/demo/plugins/index/index.vue
index 917337d6..d3997fb4 100644
--- a/src/pages/demo/plugins/index/index.vue
+++ b/src/pages/demo/plugins/index/index.vue
@@ -1,14 +1,17 @@
 <template>
   <d2-container :filename="filename" type="ghost">
-    <d2-module-banner slot="header" v-bind="banner"/>
+    <d2-module-index-banner slot="header" v-bind="banner"/>
+    <d2-module-index-menu :menu="menu"/>
   </d2-container>
 </template>
 
 <script>
+import menu from '@/menu/modules/demo-plugins'
 export default {
   data () {
     return {
       filename: __filename,
+      menu,
       banner: {
         title: 'PLUGIN',
         subTitle: 'D2Admin 集成了许多实用插件'