diff --git a/module/doc/css/view.css b/module/doc/css/view.css
index 0e8c9e5b8b..4f44ea039d 100644
--- a/module/doc/css/view.css
+++ b/module/doc/css/view.css
@@ -49,7 +49,6 @@
 .overflow-auto {overflow: auto;}
 .overflow-visible {overflow: visible;}
 .overflow-hidden {overflow: hidden;}
-#mainContent > .panel {margin-bottom: 0; overflow-y: auto;}
 .detail-title .actions .ajaxCollect > img {width: 20px;}
 .actions > .text {color: #8c8c8c; font-size: 14px;}
 .flex-content {display: flex; width: 100%; height: 100%;}
@@ -58,7 +57,12 @@
 .flex-content > #history > #closeIcon {position: absolute; right: 10px; top: 10px;}
 .panel {margin-bottom: 0;}
 .detail {margin: 0 4px;}
+#mainContent > .panel {margin-bottom: 0; overflow-y: auto;}
 
 .info .version, .info .crumbs {float: left;}
-.info .crumbs {font-size: 13px; margin-top: 5px; font-weight: normal;}
-.info .crumbs img {margin-right: 3px;}
+.crumbs img {margin-right: 3px; margin-bottom: 4px;}
+.crumbs {float: left; display: flex;height: 32px; width: 670px; align-items: center; overflow: hidden;}
+.crumbs a {padding: 6px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
+.crumbs .separator {flex: 0 0 15px; display: flex; justify-content: center; align-items: center;}
+.crumbs :last-child {flex: none;}
+
diff --git a/module/doc/js/common.js b/module/doc/js/common.js
index 3aa7c5c0c7..64c7ef9dd9 100644
--- a/module/doc/js/common.js
+++ b/module/doc/js/common.js
@@ -147,6 +147,7 @@ $(document).ready(function()
         }
     });
 
+
     'use strict';
 
     var NAME = 'zui.splitRow'; // model name.
@@ -275,6 +276,7 @@ $(document).ready(function()
     $(function()
     {
         $('.split-row').splitRow();
+        updateCrumbs();
     });
 
     var $pageSetting = $('#pageSetting');
@@ -389,3 +391,30 @@ function submit(object)
     $('#dataform').submit();
     setTimeout(function(){$(object).attr('type', 'button').removeAttr('disabled')}, 2000);
 }
+
+/**
+ * Update crumbs.
+ *
+ * @access public
+ * @return void
+ */
+function updateCrumbs()
+{
+    var $crumbs       = $('#crumbs');
+    var $crumbItems   = $('#crumbs > a');
+    var crumbMaxWidth = 660;
+    if($crumbs.width < crumbMaxWidth || $crumbItems.length == 1) return;
+
+    /* last crumbItem width major */
+    var $lastChild = $($crumbItems[$crumbItems.length -1]);
+    var $separator = "<div class='separator'> > </div>"
+    var $ellipsis  = "<div class='ellipsis'> ... </div>"
+    if($lastChild.width() > $crumbs.width())
+    {
+        var $appendChild = $lastChild[0];
+        $crumbs.empty();
+        $crumbs.append($appendChild);
+        $crumbs.prepend($separator);
+        $crumbs.prepend($ellipsis);
+    }
+}
diff --git a/module/doc/view/content.html.php b/module/doc/view/content.html.php
index 9cdfd07025..aa18eb083e 100644
--- a/module/doc/view/content.html.php
+++ b/module/doc/view/content.html.php
@@ -28,7 +28,6 @@
             </div>
             <div class="user"></div>
             <div class="time"></div>
-            <div class="crumbs"><?php echo implode(' > ', $crumbs);?></div>
           </div>
           <div class="actions">
             <span class='text'><?php echo$lang->doc->diff?></span>
diff --git a/module/doc/view/view.html.php b/module/doc/view/view.html.php
index 95d219076a..6a8f449261 100644
--- a/module/doc/view/view.html.php
+++ b/module/doc/view/view.html.php
@@ -26,6 +26,9 @@
   <?php echo $objectDropdown;?>
   <?php echo html::backButton("<i class='icon icon-back icon-sm'></i> " . $lang->goback, "id='backBtn'", 'btn btn-link')?>
   </div>
+  <div id="crumbs" class="crumbs">
+    <?php echo implode(' > ', $crumbs);?>
+  </div>
   <div class="btn-toolbar pull-right">
     <?php
     if($canExport) echo html::a($this->createLink('doc', $exportMethod, "libID=$libID&docID=$docID"), "<i class='icon-export muted'> </i>" . $lang->export, 'hiddenwin', "class='btn btn-link' id='docExport'");