diff --git a/src/assets/style/theme/theme-base.scss.REMOVED.git-id b/src/assets/style/theme/theme-base.scss.REMOVED.git-id
index fcd48ec1..2db84ab2 100644
--- a/src/assets/style/theme/theme-base.scss.REMOVED.git-id
+++ b/src/assets/style/theme/theme-base.scss.REMOVED.git-id
@@ -1 +1 @@
-134f6af0a62409abc3a59f2e23a1a00817f44b4c
\ No newline at end of file
+35339c248c50cb38d1ef2787c8bd7b86f24b4e30
\ No newline at end of file
diff --git a/src/assets/style/theme/theme.scss.REMOVED.git-id b/src/assets/style/theme/theme.scss.REMOVED.git-id
index 276f4bb5..4990c2ce 100644
--- a/src/assets/style/theme/theme.scss.REMOVED.git-id
+++ b/src/assets/style/theme/theme.scss.REMOVED.git-id
@@ -1 +1 @@
-5e28075542c22533bf13f61de9a2eaf52bf18157
\ No newline at end of file
+12a8c966ed20571d09f5e912f7a83bc86264bf83
\ No newline at end of file
diff --git a/src/layout/header-aside/components/menu-header/index.vue b/src/layout/header-aside/components/menu-header/index.vue
index 940aaf63..90884efd 100644
--- a/src/layout/header-aside/components/menu-header/index.vue
+++ b/src/layout/header-aside/components/menu-header/index.vue
@@ -1,10 +1,22 @@
 <template>
-  <el-menu mode="horizontal" :default-active="active" @select="handleMenuSelect">
-    <template v-for="(menu, menuIndex) in header">
-      <d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
-      <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
-    </template>
-  </el-menu>
+  <div class="d2-theme-header-menu" ref="page" :class="{'is-scrollable': isScroll}" flex="cross:center">
+    <div class="d2-theme-header-menu__content" ref="content" flex-box="1" flex>
+      <div class="d2-theme-header-menu__scroll" ref="scroll" flex-box="0" :style="'transform: translateX(' + currentTranslateX + 'px);'">
+        <el-menu mode="horizontal" :default-active="active" @select="handleMenuSelect">
+          <template v-for="(menu, menuIndex) in header">
+            <d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
+            <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
+          </template>
+        </el-menu>
+      </div>
+    </div>
+    <div v-if="isScroll" class="d2-theme-header-menu__prev" flex-box="0" @click="scroll('left')" flex="main:center cross:center">
+      <i class="el-icon-arrow-left"></i>
+    </div>
+    <div v-if="isScroll" class="d2-theme-header-menu__next" flex-box="0" @click="scroll('right')" flex="cross:center">
+      <i class="el-icon-arrow-right"></i>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -28,7 +40,11 @@ export default {
   },
   data () {
     return {
-      active: ''
+      active: '',
+      isScroll: false,
+      scrollWidth: 0,
+      contentWidth: 0,
+      currentTranslateX: 0
     }
   },
   watch: {
@@ -38,6 +54,65 @@ export default {
       },
       immediate: true
     }
+  },
+  methods: {
+    scroll (direction) {
+      if (direction === 'left') {
+        // 向右滚动
+        this.currentTranslateX = 0
+      } else {
+        // 向左滚动
+        if (this.contentWidth * 2 - this.currentTranslateX <= this.scrollWidth) {
+          this.currentTranslateX -= this.contentWidth
+        } else {
+          this.currentTranslateX = this.contentWidth - this.scrollWidth
+        }
+      }
+    }
+  },
+  mounted () {
+    const checkScroll = () => {
+      let contentWidth = this.$refs.content.clientWidth
+      let scrollWidth = this.$refs.scroll.clientWidth
+      if (this.isScroll) {
+        // 页面依旧允许滚动的情况，需要更新width
+        if (this.contentWidth - this.scrollWidth === this.currentTranslateX) {
+          // currentTranslateX 也需要相应变化【在右端到头的情况时】
+          this.currentTranslateX = contentWidth - scrollWidth
+          // 快速的滑动依旧存在判断和计算时对应的contentWidth变成正数，所以需要限制一下
+          if (this.currentTranslateX > 0) {
+            this.currentTranslateX = 0
+          }
+        }
+        // 更新元素数据
+        this.contentWidth = contentWidth
+        this.scrollWidth = scrollWidth
+        // 判断何时滚动消失: 当page > content + btns(40)
+        if (contentWidth > scrollWidth + 40) {
+          this.isScroll = false
+        }
+      }
+      // 判断何时滚动出现: 当page < content
+      if (!this.isScroll && contentWidth < scrollWidth) {
+        this.isScroll = true
+        // 注意，当isScroll变为true，对应的元素盒子大小会发生变化
+        this.$nextTick(() => {
+          contentWidth = this.$refs.content.clientWidth
+          scrollWidth = this.$refs.scroll.clientWidth
+          this.contentWidth = contentWidth
+          this.scrollWidth = scrollWidth
+          this.currentTranslateX = 0
+        })
+      }
+    }
+    // 初始化判断
+    checkScroll()
+
+    // 默认判断父元素和子元素的大小，以确定初始情况是否显示滚动
+    // 全局窗口变化监听，判断父元素和子元素的大小，从而控制isScroll的开关
+    window.onresize = () => {
+      checkScroll()
+    }
   }
 }
 </script>
diff --git a/src/layout/header-aside/layout.vue b/src/layout/header-aside/layout.vue
index 8b6ba72f..1a3514e7 100644
--- a/src/layout/header-aside/layout.vue
+++ b/src/layout/header-aside/layout.vue
@@ -13,17 +13,18 @@
         :style="{
           opacity: this.searchActive ? 0.5 : 1
         }"
-        flex-box="0">
-        <div class="logo-group" :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}">
+        flex-box="0"
+        flex>
+        <div class="logo-group" :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}" flex-box="0">
           <img v-if="asideCollapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
           <img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`">
         </div>
-        <div class="toggle-aside-btn" @click="handleToggleAside">
+        <div class="toggle-aside-btn" @click="handleToggleAside" flex-box="0">
           <d2-icon name="bars"/>
         </div>
-        <d2-menu-header/>
+        <d2-menu-header flex-box="1"/>
         <!-- 顶栏右侧 -->
-        <div class="d2-header-right">
+        <div class="d2-header-right" flex-box="0">
           <!-- 如果你只想在开发环境显示这个按钮请添加 v-if="$env === 'development'" -->
           <d2-header-search @click="handleSearchClick"/>
           <d2-header-error-log/>