diff --git a/core/src/main/resources/lib/layout/breadcrumb.jelly b/core/src/main/resources/lib/layout/breadcrumb.jelly
index 56117a62d83d..69c451477aaf 100644
--- a/core/src/main/resources/lib/layout/breadcrumb.jelly
+++ b/core/src/main/resources/lib/layout/breadcrumb.jelly
@@ -26,6 +26,9 @@ THE SOFTWARE.
   <st:documentation>
     Used inside &lt;l:layout> to render additional breadcrumb items.
 
+    <st:attribute name="title" use="required">
+      Display name of the breadcrumb.
+    </st:attribute>
     <st:attribute name="href">
       URL that the breadcrumb item links to. Can be omitted.
     </st:attribute>
@@ -33,16 +36,24 @@ THE SOFTWARE.
       If specified, this ID will be assigned to the LI element.
       This is useful for programmatically adding the context menu
     </st:attribute>
-    <st:attribute name="title" use="required">
-      Display name of the breadcrumb.
+    <st:attribute name="hasMenu">
+      If true, this breadcrumb item will include a '⌄' symbol to display a dropdown menu with items
+      from the '{breadcrumb.href}/contextMenu' path. Since TODO
     </st:attribute>
   </st:documentation>
 
   <j:if test="${mode=='breadcrumbs'}">
     <li id="${attrs.id}" class="item">
-      <a href="${attrs.href}">
-        ${attrs.title}
-      </a>
+      <j:choose>
+        <j:when test="${attrs.href == null}">
+          ${attrs.title}
+        </j:when>
+        <j:otherwise>
+          <a href="${attrs.href}" class="${attrs.hasMenu ? 'model-link' : ''}">
+            ${attrs.title}
+          </a>
+        </j:otherwise>
+      </j:choose>
     </li>
   </j:if>
 </j:jelly>
diff --git a/core/src/main/resources/lib/layout/breadcrumbBar.jelly b/core/src/main/resources/lib/layout/breadcrumbBar.jelly
index 770e4ee15beb..cb2047167653 100644
--- a/core/src/main/resources/lib/layout/breadcrumbBar.jelly
+++ b/core/src/main/resources/lib/layout/breadcrumbBar.jelly
@@ -42,19 +42,10 @@ THE SOFTWARE.
         <ul id="breadcrumbs">
           <j:forEach var="anc" items="${request.ancestors}">
             <j:if test="${h.isModel(anc.object) and anc.prev.url!=anc.url}">
-              <li class="item">
-                <a href="${anc.url}/" class="${h.isModelWithContextMenu(anc.object)?'model-link':null}">
-                  <!-- Workaround to set desired name to first breadcrumb (instead of Jenkins) -->
-                  <j:choose>
-                    <j:when test="${anc.object == app}">
-                      ${%Dashboard}
-                    </j:when>
-                    <j:otherwise>
-                      ${anc.object.displayName}
-                    </j:otherwise>
-                  </j:choose>
-                </a>
-              </li>
+              <j:set var="mode" value="breadcrumbs" />
+              <l:breadcrumb title="${anc.object == app ? '%Dashboard' : anc.object.displayName}"
+                            href="${anc.url}/"
+                            hasMenu="${h.isModelWithContextMenu(anc.object)}" />
               <j:choose>
                 <j:when test="${h.isModelWithChildren(anc.object)}">
                   <li class="children" href="${anc.url}/">
diff --git a/war/src/main/less/modules/breadcrumbs.less b/war/src/main/less/modules/breadcrumbs.less
index bf2f2d864feb..983ecb120dd7 100644
--- a/war/src/main/less/modules/breadcrumbs.less
+++ b/war/src/main/less/modules/breadcrumbs.less
@@ -26,32 +26,35 @@
     padding: 0;
     flex: 1;
     flex-wrap: wrap;
+    z-index: 0;
 
     & > li {
+      position: relative;
+      color: var(--text-color);
+      font-weight: 500;
+      font-size: 0.85rem;
+      padding: 0.2rem 0.4rem;
+
       & > a {
         .item();
 
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        padding: 0.2rem 0.4rem;
-        font-weight: 500;
-        font-size: 0.85rem;
-        color: var(--text-color);
-        z-index: 0;
+        font-weight: inherit;
+        font-size: inherit;
+        margin: 0;
+        padding: 0;
+        color: inherit;
         text-decoration: none;
         margin-right: 0 !important;
 
         &::before, &::after {
-          inset: -0.2rem -0.2rem;
+          inset: -0.25rem -0.6rem;
         }
       }
 
       & > .model-link {
-        .jenkins-menu-dropdown-chevron {
-          top: 6px;
-        }
-
         @media (hover: none) {
           margin-right: 30px !important;
         }
@@ -125,7 +128,6 @@
   display: inline-block;
   width: 14px;
   height: 14px;
-  top: 2px;
   right: 0;
   border: none;
   outline: none;