diff --git a/app/assets/stylesheets/navigation/breadcrumbs.scss b/app/assets/stylesheets/navigation/breadcrumbs.scss
new file mode 100644
index 000000000..5e3b80b52
--- /dev/null
+++ b/app/assets/stylesheets/navigation/breadcrumbs.scss
@@ -0,0 +1,24 @@
+.sci--layout-navigation-breadcrumbs {
+  --max-breadcrumbs-link-width: 180px;
+  padding: 14px 24px 8px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 14px;
+
+  .breadcrumbs-link {
+    color: var(--sn-blue);
+    max-width: var(--max-breadcrumbs-link-width);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:last-child {
+      color: var(--sn-grey);
+    }
+  }
+
+  .delimiter {
+    color: var(--sn-grey);
+  }
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 862538288..a029a5b6d 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -57,8 +57,7 @@
     <span style="display: none;" data-hook="body-js"></span>
     <span style="display: none;" data-hook="application-body-html"></span>
 
-
-    <div class="sci--layout" data-breadcrumbs-collapsed="true" data-navigator-collapsed="<%= !content_for?(:sidebar_title) %>">
+    <div class="sci--layout" data-breadcrumbs-collapsed="<%= !@breadcrumbs_items&.length %>" data-navigator-collapsed="<%= !content_for?(:sidebar_title) %>">
       <div class="sci--layout-navigation-top" >
         <%= render "shared/navigation/top" %>
       </div>