diff --git a/media/css/seahub.css b/media/css/seahub.css
index da1c09e370..04530181fd 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -367,12 +367,6 @@ table img { vertical-align:middle; }
     border-radius: 5px;
     display: block;
 }
-/**** overwrite bootstrap css ****/
-.breadcrumb {
-    padding:0;
-    background-color:#fff;
-    border-radius:0;
-}
 /********** common class ***********/
 .hl { background-color: #f8f8f8; }/*highlight*/
 .fleft { float:left }
@@ -594,6 +588,11 @@ textarea:-moz-placeholder {/* for FF */
     padding:0.6rem 0rem 0.5rem;
     word-break:break-all;
 }
+.path-split {
+    display:inline-block;
+    padding:0 5px;
+    color:#818a91;
+}
 /****paginator****/
 #paginator {
     text-align:center;
diff --git a/seahub/templates/js/dir-view.html b/seahub/templates/js/dir-view.html
index 6a009ac53a..75ece22d00 100644
--- a/seahub/templates/js/dir-view.html
+++ b/seahub/templates/js/dir-view.html
@@ -1,7 +1,7 @@
 {% load i18n %}
 <script type="text/template" id="dir-view-tmpl">
     <div class="repo-file-list-topbar">
-        <ol class="path-bar breadcrumb"></ol>
+        <p class="path-bar"></p>
         <div class="repo-op"></div>
     </div>
     <div class="js-dir-content">
diff --git a/seahub/templates/js/sysadmin-templates.html b/seahub/templates/js/sysadmin-templates.html
index 7d01369d12..872ef67a0f 100644
--- a/seahub/templates/js/sysadmin-templates.html
+++ b/seahub/templates/js/sysadmin-templates.html
@@ -424,7 +424,7 @@
 
 <script type="text/template" id="dir-view-tmpl">
     <div class="repo-file-list-topbar">
-        <ol class="path-bar breadcrumb"></ol>
+        <p class="path-bar"></p>
         <div class="repo-op"></div>
     </div>
     <div class="js-dir-content">
@@ -447,18 +447,21 @@
 
 <script type="text/template" id="dir-path-bar-tmpl">
     <% if (is_system_library) { %>
-    <li><a href="#system-lib/" class="path-link normal">{% trans "System" %}</a></li>
+    <a href="#system-lib/" class="path-link normal">{% trans "System" %}</a>
     <% } else { %>
-    <li><a href="#all-libs/" class="path-link normal">{% trans "All" %}</a></li>
+    <a href="#all-libs/" class="path-link normal">{% trans "All" %}</a>
     <% } %>
+    <span class="path-split">/</span>
     <% if (path == '/') { %>
-        <li><%- repo_name %></li>
+        <%- repo_name %>
     <% } else { %>
-        <li><a href="#libs/<%= repo_id %>/" class="path-link normal"><%- repo_name %></a></li>
+        <a href="#libs/<%= repo_id %>/" class="path-link normal"><%- repo_name %></a>
+        <span class="path-split">/</span>
         <% for (var i = 0, len = path_list.length - 1; i < len; i++) { %>
-        <li><a href="#libs/<%= repo_id %>/<% print(path_list_encoded.slice(0, i+1).join('/')); %>" class="path-link normal"><%- path_list[i] %></a></li>
+        <a href="#libs/<%= repo_id %>/<% print(path_list_encoded.slice(0, i+1).join('/')); %>" class="path-link normal"><%- path_list[i] %></a>
+        <span class="path-split">/</span>
         <% } %>
-        <li><%- path_list[i] %></li>
+        <%- path_list[i] %>
     <% } %>
 </script>
 
diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index 60f41abd64..7550319f4b 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -158,23 +158,27 @@
 </script>
 <script type="text/template" id="dir-path-bar-tmpl">
     <% if (context == 'group') { %>
-        <li><a href="#groups/" class="path-link normal">{% trans "Groups" %}</a></li>
-        <li><a href="#<%= category %>/" class="path-link normal"><%- group_name %></a></li>
+        <a href="#groups/" class="path-link normal">{% trans "Groups" %}</a>
+        <span class="path-split">/</span>
+        <a href="#<%= category %>/" class="path-link normal"><%- group_name %></a>
     <% } else if (context == 'org') { %>
-        <li><a href="#<%= category %>/" class="path-link normal">{% trans "Organization" context "This is a label in navigation, meaning the public area for all registered users to share libraries." %}</a></li>
+        <a href="#<%= category %>/" class="path-link normal">{% trans "Shared with all" %}</a>
     <% } else if (context == 'common') { %>
-        <li><a href="#my-libs/" class="path-link normal">{% trans "My Libraries" %}</a></li>
+        <a href="#my-libs/" class="path-link normal">{% trans "My Libraries" %}</a>
     <% } else { %>
-        <li><a href="#<%= category %>/" class="path-link normal"><% if (category == 'my-libs') { %>{% trans "My Libraries" %}<% } %><% if (category == 'shared-libs') { %>{% trans "Shared to me" %}<% } %></a></li>
+        <a href="#<%= category %>/" class="path-link normal"><% if (category == 'my-libs') { %>{% trans "My Libraries" %}<% } %><% if (category == 'shared-libs') { %>{% trans "Shared with me" %}<% } %></a>
     <% } %>
+    <span class="path-split">/</span>
     <% if (path == '/') { %>
-        <li><%- repo_name %></li>
+        <%- repo_name %>
     <% } else { %>
-        <li><a href="#<%= category %>/lib/<%= repo_id %>/" class="path-link normal"><%- repo_name %></a></li>
+        <a href="#<%= category %>/lib/<%= repo_id %>/" class="path-link normal"><%- repo_name %></a>
+        <span class="path-split">/</span>
         <% for (var i = 0,len = path_list.length - 1; i < len; i++) { %>
-        <li><a href="#<%= category %>/lib/<%= repo_id %>/<% print(path_list_encoded.slice(0, i+1).join('/')); %>" class="path-link normal"><%- path_list[i] %></a></li>
+        <a href="#<%= category %>/lib/<%= repo_id %>/<% print(path_list_encoded.slice(0, i+1).join('/')); %>" class="path-link normal"><%- path_list[i] %></a>
+        <span class="path-split">/</span>
         <% } %>
-        <li><%- path_list[i] %></li>
+        <%- path_list[i] %>
     <% } %>
 </script>
 <script type="text/template" id="dirents-hd-tmpl">
@@ -735,10 +739,11 @@
 </form>
 </script>
 <script type="text/template" id="group-top-tmpl">
-<ol class="path-bar breadcrumb">
-    <li><a href="{% url 'group_list' %}" class="normal">{% trans "Groups" %}</a></li>
-    <li><%- name %></li>
-</ol>
+<p class="path-bar">
+    <a href="{% url 'group_list' %}" class="normal">{% trans "Groups" %}</a>
+    <span class="path-split">/</span>
+    <%- name %>
+</p>
 <div class="hd ovhd">
     {% if user.permissions.can_add_repo %}
     <button class="repo-create btn-white fleft"><span class="icon-plus-square add vam"></span><span class="vam">{% trans "New Library" %}</span></button>
diff --git a/seahub/templates/sysadmin/sys_admin_group_info.html b/seahub/templates/sysadmin/sys_admin_group_info.html
index 9d8deb94ef..f0971b2dac 100644
--- a/seahub/templates/sysadmin/sys_admin_group_info.html
+++ b/seahub/templates/sysadmin/sys_admin_group_info.html
@@ -5,10 +5,11 @@
 
 {% block right_panel %}
 
-<ol class="path-bar breadcrumb">
-    <li><a class="path-link normal" href="{{ SITE_ROOT }}sys/groupadmin/">Groups</a></li>
-    <li>{{ group.group_name }}</li>
-</ol>
+<p class="path-bar">
+    <a class="normal" href="{{ SITE_ROOT }}sys/groupadmin/">Groups</a>
+    <span class="path-split">/</span>
+    {{ group.group_name }}
+</p>
 
 <div id="tabs" class="tab-tabs">
     <div class="hd ovhd">
diff --git a/seahub/templates/sysadmin/userinfo.html b/seahub/templates/sysadmin/userinfo.html
index 41f97f8160..432a3ffcc8 100644
--- a/seahub/templates/sysadmin/userinfo.html
+++ b/seahub/templates/sysadmin/userinfo.html
@@ -11,10 +11,11 @@
 
 {% block right_panel %}
 
-<ol class="path-bar breadcrumb">
-    <li><a class="path-link normal" href="{{ SITE_ROOT }}sys/useradmin/">Users</a></li>
-    <li>{{ email }}</li>
-</ol>
+<p class="path-bar">
+    <a class="normal" href="{{ SITE_ROOT }}sys/useradmin/">Users</a>
+    <span class="path-split">/</span>
+    {{ email }}
+</p>
 
 <div id="tabs" class="tab-tabs">
     <div class="hd header-bar ovhd">