diff --git a/module/doc/css/view.css b/module/doc/css/view.css
index 10b71539f8..668c85cbef 100644
--- a/module/doc/css/view.css
+++ b/module/doc/css/view.css
@@ -25,7 +25,6 @@
 .article-content .info .keywords .label {padding-right:8px; padding-left:8px; color:#18A6FD; border-color:rgba(24, 166, 253, 0.25); height:22px; line-height:14px; margin-right:4px;}
 
 .article-content {width: 100%; display: inline-block;}
-/* .outline-toggle i.icon-angle-right, i.icon-angle-left {width: 18px; height: 18px; border-radius: 50%; position: absolute; padding-left: 2px; padding-top: 1px;} */
 .outline-toggle {position: absolute; right: 20px; top: 50px;}
 .outline-toggle i.icon-angle-right:before {content: "\e314"; cursor: pointer;}
 .outline-toggle i.icon-angle-left:before {content: "\e315"; cursor: pointer;}
@@ -68,5 +67,7 @@
 .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;}
+.crumbs a {flex: none;}
+.flex-auto {flex: auto!important;}
 
 .main-col {position: relative;}
diff --git a/module/doc/js/common.js b/module/doc/js/common.js
index 6fd2a0f58f..1e00818dfe 100644
--- a/module/doc/js/common.js
+++ b/module/doc/js/common.js
@@ -408,14 +408,15 @@ function updateCrumbs()
 
     /* 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 widthSum = 0 + $lastChild.width();
+    var separatorWidth = 20;
+    for(var i = 0; i < $crumbItems.length - 1; i++)
     {
-        var $appendChild = $lastChild[0];
-        $crumbs.empty();
-        $crumbs.append($appendChild);
-        $crumbs.prepend($separator);
-        $crumbs.prepend($ellipsis);
+        var crumbItem = $crumbItems[i];
+        var widthSum  = widthSum + $(crumbItem).width() + separatorWidth;
+        if(widthSum >= crumbMaxWidth)
+        {
+            $(crumbItem).addClass('flex-auto');
+        }
     }
 }