diff --git a/template/src/index/index.html b/template/src/index/index.html
index 75a9a4ad1f41b496480619b645e61c8ca56c94e6..56dc7f0f66a9e46174ed93bbac1f39f8c89bd4fd 100644
--- a/template/src/index/index.html
+++ b/template/src/index/index.html
@@ -178,6 +178,12 @@
   <div id="main">
     <div class="tabs" id="tabs-container"></div>
   </div>
+  <footer id="footer">
+    <ol class="breadcrumb">
+      <li class="active">Z-Master</li>
+      <li class="active">首页</li>
+    </ol>
+  </footer>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/zui/1.9.2/lib/jquery/jquery.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/zui/1.9.2/js/zui.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/zui/1.9.2/lib/tabs/zui.tabs.js"></script>
diff --git a/template/src/index/js/activenav.js b/template/src/index/js/activenav.js
index 5de053345bf132b67647991856a8569fbb756d24..a4b245c74a1bdff422d5422308e2c3b136c936d3 100644
--- a/template/src/index/js/activenav.js
+++ b/template/src/index/js/activenav.js
@@ -16,6 +16,7 @@ $('#tabs-container').tabs({
     forbidClose: true
   }]
 });
+let breadcrumbPath = [];
 const tabsInstance = $('#tabs-container').data('zui.tabs');
 // Click on the left navigation bar to link with the tab page
 $('#treeMenu').on('click', 'a', function () {
@@ -25,6 +26,8 @@ $('#treeMenu').on('click', 'a', function () {
   }
   const tabName = $(this).text();
   const tabId = $(this).closest('li').data('id');
+  breadcrumbPath = [];
+  setBreadcrumbPath($(this));
   if (Object.keys(tabsInstance.tabs).includes(tabName)) {
     $(`#tab-nav-item-${tabName} .tab-nav-link`).trigger('click');
     return;
@@ -48,6 +51,8 @@ $('#treeMenu').on('click', 'a', function () {
 function activeMenuItem(activeTabId) {
   $('#treeMenu li.active').removeClass('active');
   $(`#treeMenu li[data-id=${activeTabId}] a`).closest('li').addClass('active');
+  breadcrumbPath = [];
+  setBreadcrumbPath($(`#treeMenu li[data-id=${activeTabId}] a`));
   const hasLists = $('#treeMenu li.active').parents('li.has-list');
   if(hasLists.length !== 0) {
     hasLists.each(function() {
@@ -56,6 +61,24 @@ function activeMenuItem(activeTabId) {
   }
 }
 
+/**
+ * set breadcrumb
+ * @param {JQuery<HTMLElement>} $a
+ */
+function setBreadcrumbPath($a) {
+  let $lis = $a.parents('li');
+  $lis.each(function(index, li) {
+    breadcrumbPath.unshift($(li).children('a').text());
+  });
+  const $breadcrumb = $('#footer .breadcrumb');
+  $breadcrumb.empty();
+  const breadcrumbItem = [];
+  breadcrumbPath.forEach((x, index) => {
+    breadcrumbItem.push($(`<li class="active">${x}</li>`));
+  });
+  $breadcrumb.append($('<li class="active">Z-Master</li>'), ...breadcrumbItem);
+}
+
 // Click on the tab page to link with the left navigation bar
 $('#tabs-container').on('click', '.tab-nav-link', function () {
   activeMenuItem($(this).data('id'));
diff --git a/template/src/index/less/core.less b/template/src/index/less/core.less
index 6e0410e5be62db928ee3bfff9f414ff449ce878b..008b0ed900ceadfdd4cd2eca128c8fa7ec8b5017 100644
--- a/template/src/index/less/core.less
+++ b/template/src/index/less/core.less
@@ -205,7 +205,7 @@ body {
   position: fixed;
   z-index: 1;
   top: 50px;
-  bottom: 0;
+  bottom: 36px;
   left: 0;
   overflow: hidden;
   width: 230px;
@@ -258,7 +258,7 @@ body {
   right: 0;
   bottom: 0;
   left: 230px;
-  padding: 0 10px;
+  padding: 0 10px 40px 10px;
   transition: left .5s ease-in-out;
   background-color: @main-bgcolor;
 }
@@ -267,4 +267,25 @@ body {
   min-height: 100%;
 }
 
-/* main end */
\ No newline at end of file
+/* main end */
+
+/* footer start */
+#footer {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  background: #fff;
+
+  .breadcrumb {
+    margin-bottom: 0;
+
+    li:not(:first-child) {
+      &::before {
+        content: '>';
+      }
+    }
+  }
+}
+/* footer end */