diff --git a/base-component/webroot/screen/includes/WebrootVue.qvt.ftl b/base-component/webroot/screen/includes/WebrootVue.qvt.ftl
index 647eb0513..5b18701b7 100644
--- a/base-component/webroot/screen/includes/WebrootVue.qvt.ftl
+++ b/base-component/webroot/screen/includes/WebrootVue.qvt.ftl
@@ -69,7 +69,16 @@ along with this software (see the LICENSE.md file). If not, see
 
                 <q-icon size="1.5em" name="chevron_right" color="grey" class="gt-xs"></q-icon>
             </template></template>
-            <m-link v-if="navMenuList.length > 0" :href="getNavHref(navMenuList.length - 1)" class="gt-xs">{{navMenuList[navMenuList.length - 1].title}}</m-link>
+            <template v-if="navMenuList.length > 0">
+                <template v-if="navMenuList[navMenuList.length - 1].breadcrumbItems && navMenuList[navMenuList.length - 1].breadcrumbItems.length">
+                    <template v-for="(breadcrumbItem, bcIndex) in navMenuList[navMenuList.length - 1].breadcrumbItems">
+                        <q-icon v-if="bcIndex > 0" size="1.5em" name="chevron_right" color="grey" class="gt-xs"></q-icon>
+                        <m-link v-if="breadcrumbItem.pathWithParams" :href="breadcrumbItem.pathWithParams" class="gt-xs">{{breadcrumbItem.title}}</m-link>
+                        <span v-else class="gt-xs">{{breadcrumbItem.title}}</span>
+                    </template>
+                </template>
+                <m-link v-else :href="getNavHref(navMenuList.length - 1)" class="gt-xs">{{navMenuList[navMenuList.length - 1].title}}</m-link>
+            </template>
 
             <q-space></q-space>
 
diff --git a/base-component/webroot/screen/includes/WebrootVue.vuet.ftl b/base-component/webroot/screen/includes/WebrootVue.vuet.ftl
index 6c9448b33..51acf6b46 100644
--- a/base-component/webroot/screen/includes/WebrootVue.vuet.ftl
+++ b/base-component/webroot/screen/includes/WebrootVue.vuet.ftl
@@ -60,7 +60,16 @@ along with this software (see the LICENSE.md file). If not, see
                     </template>
                 </li>
             </ul>
-            <template v-if="navMenuList.length > 0"><m-link class="navbar-text" :href="getNavHref(navMenuList.length - 1)">{{navMenuList[navMenuList.length - 1].title}}</m-link></template>
+            <template v-if="navMenuList.length > 0">
+                <template v-if="navMenuList[navMenuList.length - 1].breadcrumbItems && navMenuList[navMenuList.length - 1].breadcrumbItems.length">
+                    <template v-for="(breadcrumbItem, bcIndex) in navMenuList[navMenuList.length - 1].breadcrumbItems">
+                        <i v-if="bcIndex > 0" class="fa fa-chevron-right"></i>
+                        <m-link v-if="breadcrumbItem.pathWithParams" class="navbar-text" :href="breadcrumbItem.pathWithParams">{{breadcrumbItem.title}}</m-link>
+                        <span v-else class="navbar-text">{{breadcrumbItem.title}}</span>
+                    </template>
+                </template>
+                <m-link v-else class="navbar-text" :href="getNavHref(navMenuList.length - 1)">{{navMenuList[navMenuList.length - 1].title}}</m-link>
+            </template>
             <#-- logout button -->
             <a href="${sri.buildUrl("/Login/logout").url}" data-toggle="tooltip" data-original-title="${ec.l10n.localize("Logout")} ${(ec.user.userAccount.userFullName)!''}"
                    onclick="return confirm('${ec.l10n.localize("Logout")} ${(ec.user.userAccount.userFullName)!''}?')"